@noxlovette/material 0.1.17 → 0.1.19

package/dist/components/buttons/FAB.svelte

@@ -14,7 +14,6 @@ Floating action buttons (FABs) help people take primary actions.
   import { fab } from './theme.js';
   import type { FABProps } from './types.js';
   import FABMenu from './FABMenu.svelte';
-  import ButtonIcon from './ButtonIcon.svelte';
   import { Layer, Icon } from '../../utils/index.js';
   import { clickOutside } from '../../actions/index.js';
   import { Button, type ButtonRootProps } from 'bits-ui';
@@ -34,10 +33,19 @@ Floating action buttons (FABs) help people take primary actions.
   }: FABProps = $props();
 
   const { base, icon, label: labelClass } = $derived(fab({ size, config, expanded }));
-  const btnCls = $derived(base({ class: clsx(className) }));
 
   let showMenu = $state(false);
 
+  const btnCls = $derived(
+    base({
+      class: clsx(
+        className,
+        'transition-[border-radius] duration-300',
+        withMenu && showMenu && '!rounded-full'
+      )
+    })
+  );
+
   function handleClick(e: MouseEvent) {
     if (disabled) {
       e.preventDefault();
@@ -45,24 +53,12 @@ Floating action buttons (FABs) help people take primary actions.
     }
     if (withMenu) {
       e.preventDefault();
-      showMenu = true;
+      showMenu = !showMenu;
     }
   }
 </script>
 
-{#if withMenu && showMenu}
-  <div class="relative z-50" use:clickOutside={() => (showMenu = false)}>
-    <FABMenu>
-      {@render children?.()}
-    </FABMenu>
-    <ButtonIcon
-      variant="filled"
-      class="shadow-elevation-3"
-      iconProps={{ name: 'close' }}
-      onclick={() => (showMenu = !showMenu)}
-    />
-  </div>
-{:else}
+<div class="contents" use:clickOutside={() => (showMenu = false)}>
   <Button.Root
     {disabled}
     {formaction}
@@ -71,12 +67,18 @@ Floating action buttons (FABs) help people take primary actions.
     data-cy="m3-fab"
     {...restProps as ButtonRootProps}
   >
-    <Icon {...iconProps} class={icon()} />
+    <Icon {...withMenu && showMenu ? { name: 'close' } : iconProps} class={icon()} />
     <Layer />
-    {#if expanded}
+    {#if expanded && !(withMenu && showMenu)}
       <p class={labelClass()}>
         {label}
       </p>
     {/if}
   </Button.Root>
-{/if}
+
+  {#if withMenu && showMenu}
+    <FABMenu>
+      {@render children?.()}
+    </FABMenu>
+  {/if}
+</div>

package/dist/components/buttons/FABMenu.svelte

@@ -10,21 +10,19 @@ Should be used with `FABMenuItem` as children.
   import { enterExit } from '../../animation/enterExit.js';
   import { easeEmphasizedDecel } from '../../animation/easing.js';
 
-  let { children, class: className, position = 'top', ...restProps }: FABMenuProps = $props();
+  let { children, class: className, ...restProps }: FABMenuProps = $props();
 
-  const { base } = $derived(fabMenu({ position }));
+  const { base } = fabMenu();
 
   const margin = 8;
   const gap = 8;
   let coords = $state({
     x: 0,
     y: 0,
-    originX: 'left',
-    originY: 'top',
+    originX: 'right',
+    originY: 'bottom',
     maxHeight: 0
   });
-
-  // TODO: out:enterExit={{ duration: 200, easing: easeEmphasizedAccel, mode: 'scale' }} – if you can solve how to eliminate another button from appearing here, use this too
 </script>
 
 <ul
@@ -38,9 +36,11 @@ Should be used with `FABMenuItem` as children.
   style:max-height={coords.maxHeight ? `${coords.maxHeight}px` : undefined}
   style:--enter-exit-origin={`${coords.originY} ${coords.originX}`}
   {@attach (menu) => {
+    const anchorEl = menu.previousElementSibling as HTMLElement;
+    if (!anchorEl) return;
+
+    const anchorRect = anchorEl.getBoundingClientRect();
     const rect = menu.getBoundingClientRect();
-    const anchorRect = menu.parentElement?.getBoundingClientRect();
-    if (!anchorRect) return;
 
     const spaceAbove = anchorRect.top - gap - margin;
     const spaceBelow = window.innerHeight - margin - (anchorRect.bottom + gap);
@@ -52,29 +52,22 @@ Should be used with `FABMenuItem` as children.
     const targetTop = placeAbove ? anchorRect.top - gap - maxHeight : anchorRect.bottom + gap;
 
     let targetLeft = anchorRect.right - rect.width;
-
     if (targetLeft + rect.width > window.innerWidth - margin) {
       targetLeft = window.innerWidth - margin - rect.width;
     }
-    if (targetLeft < margin) {
-      targetLeft = margin;
-    }
+    if (targetLeft < margin) targetLeft = margin;
 
     let clampedTop = targetTop;
-    if (clampedTop < margin) {
-      clampedTop = margin;
-    }
+    if (clampedTop < margin) clampedTop = margin;
     if (clampedTop + maxHeight > window.innerHeight - margin) {
       clampedTop = window.innerHeight - margin - maxHeight;
     }
 
-    const x = targetLeft - rect.left;
-    const y = clampedTop - rect.top;
     const originY = placeAbove ? 'bottom' : 'top';
     const originX =
       anchorRect.left + anchorRect.width / 2 < targetLeft + rect.width / 2 ? 'left' : 'right';
 
-    coords = { x, y, originX, originY, maxHeight };
+    coords = { x: targetLeft, y: clampedTop, originX, originY, maxHeight };
   }}
 >
   {@render children()}

package/dist/components/buttons/theme.d.ts

@@ -491,22 +491,28 @@ export declare const fab: import("tailwind-variants").TVReturnType<{
     label: string;
 }, undefined, unknown, unknown, undefined>>;
 export declare const fabMenu: import("tailwind-variants").TVReturnType<{
-    position: {
-        top: string;
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
     };
-}, {
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
     base: string;
 }, undefined, {
-    position: {
-        top: string;
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
     };
-}, {
+} | {}, {
     base: string;
-}, import("tailwind-variants").TVReturnType<{
-    position: {
-        top: string;
-    };
-}, {
+}, import("tailwind-variants").TVReturnType<unknown, {
     base: string;
 }, undefined, unknown, unknown, undefined>>;
 export declare const fabMenuItem: import("tailwind-variants").TVReturnType<{

package/dist/components/buttons/theme.js

@@ -474,10 +474,7 @@ export const fab = tv({
 });
 export const fabMenu = tv({
     slots: {
-        base: 'gap-2 pb-2 flex flex-col absolute z-[100] overflow-visible p-1'
-    },
-    variants: {
-        position: { top: 'top-16' }
+        base: 'gap-2 pb-2 flex flex-col fixed left-0 top-0 z-[9999] overflow-visible p-1'
     }
 });
 export const fabMenuItem = tv({

package/dist/components/buttons/types.d.ts

@@ -1,7 +1,7 @@
 import type { AnchorButtonAttributes, IconProps } from '../../utils/index.js';
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
-import type { ButtonGroupVariants, ButtonIconVariants, ButtonMDVariants, FABMenuItemVariants, FABMenuVariants, FABVariants } from './theme.js';
+import type { ButtonGroupVariants, ButtonIconVariants, ButtonMDVariants, FABMenuItemVariants, FABVariants } from './theme.js';
 export interface ButtonGroupProps extends ButtonGroupVariants, HTMLAttributes<HTMLDivElement> {
     /**
      * The content of the button group.
@@ -157,11 +157,7 @@ export type FABProps = FABVariants & AnchorButtonAttributes & {
      */
     children?: Snippet;
 };
-export type FABMenuProps = FABMenuVariants & HTMLAttributes<HTMLUListElement> & {
-    /**
-     * The vertical position of the menu relative to the anchor.
-     */
-    position?: FABMenuVariants['position'];
+export type FABMenuProps = HTMLAttributes<HTMLUListElement> & {
     /**
      * The menu items. Use `FABMenuItem` components.
      */

package/dist/components/containers/context-menu/ContextMenu.svelte

@@ -26,7 +26,6 @@ Context menus appear on right-click and provide actions related to the clicked e
   import Divider from '../divider/Divider.svelte';
   import { enterExit } from '../../../animation/enterExit.js';
   import { easeEmphasizedDecel } from '../../../animation/easing.js';
-  import clsx from 'clsx';
 
   let {
     items = [],

package/dist/components/containers/dialogue/Dialogue.svelte

@@ -34,6 +34,7 @@ on screen until confirmed, dismissed, or a required action has been taken.
     delegateClose = false,
     class: className,
     contentProps,
+    formProps,
     ...rootRest
   }: DialogueProps = $props();
 
@@ -65,6 +66,7 @@ on screen until confirmed, dismissed, or a required action has been taken.
             action={confirmAction}
             use:enhance
             {...props}
+            {...formProps}
             class={inner({ class: className })}
             style:min-width={minWidth}
             style:max-width={maxWidth}

package/dist/components/containers/dialogue/types.d.ts

@@ -37,6 +37,8 @@ export type DialogueProps = DialogueVariants & Dialog.RootProps & {
     maxWidth?: string;
     /** Additional props */
     contentProps?: Dialog.ContentProps;
+    /** Additional props */
+    formProps?: Record<string, unknown>;
     /** Class for the inner content */
     class?: string;
     /** Optional callback when the confirm button is clicked. */

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

@@ -1,6 +1,5 @@
 export * from './checkbox/index.js';
 export * from './command/index.js';
-export * from './multipart/index.js';
 export * from './pin/index.js';
 export * from './radio-group/index.js';
 export * from './search/index.js';

package/dist/components/forms/index.js

@@ -2,7 +2,6 @@
 // folder re-exports (export everything from these folders)
 export * from './checkbox/index.js';
 export * from './command/index.js';
-export * from './multipart/index.js';
 export * from './pin/index.js';
 export * from './radio-group/index.js';
 export * from './search/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "type": "module",
   "license": "MIT",
   "repository": {

package/dist/components/forms/multipart/Multipart.svelte

@@ -1,531 +0,0 @@
-<!--
-@component
-@component
-Multipart file upload component that supports chunked uploads for large files.
-Follows Material 3 design principles for file uploaders.
--->
-<script lang="ts">
-  import { onDestroy } from 'svelte';
-  import { formatPercentage, Layer } from '../../../utils/index.js';
-  import Icon from '../../../utils/icon/Icon.svelte';
-  import ButtonIcon from '../../buttons/ButtonIcon.svelte';
-  import CircularProgress from '../../progress/CircularProgress.svelte';
-  import Label from '../../typography/label/Label.svelte';
-  import Title from '../../typography/title/Title.svelte';
-  import HStack from '../../containers/stack/HStack.svelte';
-  import Dialogue from '../../containers/dialogue/Dialogue.svelte';
-  import { nanoid } from 'nanoid';
-
-  type UploadStatus = 'waiting' | 'uploading' | 'complete' | 'error';
-
-  interface PartUploadUrl {
-    partNumber: number;
-    url: string;
-  }
-
-  interface InitResponse {
-    uploadId: string;
-    fileId: string;
-    s3Key: string;
-    parts: PartUploadUrl[];
-  }
-
-  interface CompletedPart {
-    partNumber: number;
-    etag: string;
-  }
-
-  /**
-   * Internal state for a single file upload.
-   */
-  interface FileUploadState {
-    /** Unique identifier for the upload session */
-    id: string;
-    /** The file being uploaded */
-    file: File;
-    /** Upload progress tracking */
-    progress: {
-      /** Number of chunks uploaded */
-      uploaded: number;
-      /** Total number of chunks */
-      total: number;
-      /** Total bytes uploaded */
-      bytes: number;
-      /** Total size of the file in bytes */
-      totalBytes: number;
-      /** Percentage of upload completed (0-100) */
-      percentComplete: number;
-    };
-    /** Current status of the upload */
-    status: UploadStatus;
-    /** Optional error message if status is 'error' */
-    errorMessage?: string;
-    /** AbortController for cancelling the upload */
-    abortController?: AbortController;
-  }
-
-  let {
-    taskId = null,
-    folderId = null,
-    readonly = false,
-    initialUploads = [],
-    title = 'Загрузка файлов',
-    label = 'Область загрузки файлов'
-  }: {
-    /** Unique ID of the task associated with these uploads */
-    taskId?: string | null;
-    /** ID of the folder where files will be stored */
-    folderId?: string | null;
-    /** Whether the upload area is interactive */
-    readonly?: boolean;
-    /** Initial list of files to display */
-    initialUploads?: FileUploadState[];
-    /** Title displayed above the upload area */
-    title?: string;
-    /** Accessibility label for the upload zone */
-    label?: string;
-  } = $props();
-
-  let fileUploads: FileUploadState[] = $state([...initialUploads]);
-  let fileToRemove = $state<FileUploadState | null>(null);
-  let fileInputRef = $state<HTMLInputElement>();
-
-  const CHUNK_SIZE = 5 * 1024 * 1024;
-  const MAX_FILE_SIZE = 99 * 1024 * 1024; // 99MB
-
-  function calculateChunks(file: File): number {
-    return Math.ceil(file.size / CHUNK_SIZE);
-  }
-
-  async function handleFileSelect(event: Event) {
-    if (readonly) return;
-
-    const input = event.target as HTMLInputElement;
-    if (!input.files?.length) return;
-
-    const validFiles: File[] = [];
-    const rejectedFiles: string[] = [];
-
-    Array.from(input.files).forEach((file) => {
-      if (file.size > MAX_FILE_SIZE) {
-        rejectedFiles.push(file.name);
-      } else {
-        validFiles.push(file);
-      }
-    });
-
-    const newFiles = validFiles.map((file) => ({
-      id: nanoid(),
-      file,
-      progress: {
-        uploaded: 0,
-        total: calculateChunks(file),
-        bytes: 0,
-        totalBytes: file.size,
-        percentComplete: 0
-      },
-      status: 'waiting' as UploadStatus
-    }));
-
-    fileUploads = [...fileUploads, ...newFiles];
-
-    input.value = '';
-    startUploads();
-  }
-  function startUploads() {
-    if (readonly) return;
-    fileUploads.filter((upload) => upload.status === 'waiting').forEach(uploadFile);
-  }
-  async function uploadFile(fileState: FileUploadState) {
-    if (readonly) return;
-    const { id, file } = fileState;
-    let uploadIdLocal = '';
-    let fileIdLocal = '';
-    let s3Key = '';
-
-    try {
-      fileState.status = 'uploading';
-      fileState.abortController = new AbortController();
-
-      const initResponse = await fetch('/api/multipart/init', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          fileName: file.name,
-          contentType: file.type || 'application/octet-stream',
-          fileSize: file.size,
-          totalParts: calculateChunks(file),
-          parentId: folderId,
-          taskId: taskId
-        })
-      });
-
-      if (!initResponse.ok) {
-        throw new Error(`Failed to initialize upload: ${await initResponse.text()}`);
-      }
-
-      const {
-        uploadId,
-        fileId,
-        s3Key: fileKey,
-        parts
-      } = (await initResponse.json()) as InitResponse;
-      uploadIdLocal = uploadId;
-      fileIdLocal = fileId;
-      s3Key = fileKey;
-
-      const signal = fileState.abortController.signal;
-      const completedParts: CompletedPart[] = [];
-
-      for (let i = 0; i < parts.length; i++) {
-        if (signal.aborted) {
-          throw new Error('Upload aborted by user');
-        }
-
-        const { partNumber, url } = parts[i];
-        const start = (partNumber - 1) * CHUNK_SIZE;
-        const end = Math.min(file.size, start + CHUNK_SIZE);
-        const chunk = file.slice(start, end);
-
-        try {
-          const uploadResult = await uploadWithProgress(url, chunk, signal, (loaded) => {
-            // LE FIX: calcul propre du progress
-            const previousBytes = (partNumber - 1) * CHUNK_SIZE;
-            fileState.progress.bytes = previousBytes + loaded;
-            fileState.progress.percentComplete = (fileState.progress.bytes / file.size) * 100;
-          });
-
-          if (!uploadResult.ok) {
-            throw new Error(`Failed to upload part ${partNumber}: ${uploadResult.statusText}`);
-          }
-
-          const etag = uploadResult.headers.get('ETag')?.replace(/['"]/g, '') || '';
-          completedParts.push({ partNumber, etag });
-
-          // Pas besoin de double update ici, c'est déjà fait dans le callback
-          fileState.progress.uploaded = i + 1;
-        } catch (error) {
-          throw new Error('Failed to upload');
-        }
-      }
-
-      // 3. Complete the multipart upload
-      const completeResponse = await fetch(`/api/multipart/complete?taskId=${taskId}`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          uploadId,
-          fileId: fileIdLocal,
-          s3Key,
-          parts: completedParts
-        })
-      });
-
-      if (!completeResponse.ok) {
-        throw new Error(`Failed to complete upload: ${await completeResponse.text()}`);
-      }
-
-      fileState.status = 'complete';
-    } catch (error: any) {
-      fileState.status = 'error';
-      fileState.errorMessage = 'Ошибка загрузки';
-
-      // Try to abort the upload on S3 if it was initialized
-      if (uploadIdLocal && s3Key && fileIdLocal) {
-        try {
-          await fetch('/api/multipart/abort', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-              uploadId: uploadIdLocal,
-              fileId: fileIdLocal,
-              s3Key
-            })
-          });
-        } catch (abortError: any) {
-          console.error(abortError);
-        }
-      }
-    }
-  }
-
-  // Cancel an upload
-  function cancelUpload(fileState: FileUploadState) {
-    fileState.abortController?.abort();
-    fileState.status = 'error';
-    fileState.errorMessage = 'Загрузка отменена пользователем';
-  }
-
-  // Remove a file from the list
-  function removeFile(fileState: FileUploadState) {
-    // Cancel upload if in progress
-    if (fileState.status === 'uploading') {
-      cancelUpload(fileState);
-    }
-
-    // Remove from list
-    fileUploads = fileUploads.filter((upload) => upload.id !== fileState.id);
-  }
-
-  // Clean up abort controllers on component destroy
-  onDestroy(() => {
-    fileUploads.forEach((upload) => {
-      upload.abortController?.abort();
-    });
-  });
-
-  // Upload with progress tracking
-  async function uploadWithProgress(
-    url: string,
-    data: Blob,
-    signal: AbortSignal,
-    onProgress: (loaded: number) => void
-  ): Promise<Response> {
-    return new Promise((resolve, reject) => {
-      const xhr = new XMLHttpRequest();
-
-      xhr.upload.addEventListener('progress', (event) => {
-        if (event.lengthComputable) {
-          onProgress(event.loaded);
-        }
-      });
-
-      xhr.addEventListener('loadend', () => {
-        if (xhr.readyState === 4) {
-          if (xhr.status >= 200 && xhr.status < 300) {
-            // Convert XHR response to fetch Response for consistency
-            const response = new Response(xhr.response, {
-              status: xhr.status,
-              statusText: xhr.statusText,
-              headers: new Headers({
-                ETag: xhr.getResponseHeader('ETag') || ''
-              })
-            });
-            resolve(response);
-          } else {
-            reject(new Error(`HTTP error ${xhr.status}: ${xhr.statusText}`));
-          }
-        }
-      });
-
-      xhr.addEventListener('error', () => {
-        reject(new Error('Network error occurred'));
-      });
-
-      xhr.addEventListener('abort', () => {
-        reject(new Error('Upload aborted'));
-      });
-
-      // Initialize the request
-      xhr.open('PUT', url);
-      xhr.send(data);
-
-      // Handle abort signal
-      if (signal) {
-        signal.addEventListener('abort', () => {
-          xhr.abort();
-        });
-      }
-    });
-  }
-  let isDragging = $state(false);
-
-  function handleDragOver(e: DragEvent) {
-    if (readonly) return;
-    e.preventDefault();
-    isDragging = true;
-  }
-
-  function handleDragLeave() {
-    isDragging = false;
-  }
-
-  function handleDrop(e: DragEvent) {
-    if (readonly) return;
-    e.preventDefault();
-    isDragging = false;
-
-    if (!e.dataTransfer?.files.length) return;
-
-    // Create a synthetic event that mimics an input change event
-    const mockEvent = {
-      target: {
-        files: e.dataTransfer.files
-      }
-    } as unknown as Event;
-
-    // Use your existing file handling function
-    handleFileSelect(mockEvent);
-  }
-
-  function triggerBrowse() {
-    if (readonly) return;
-    fileInputRef?.click();
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (readonly) return;
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      triggerBrowse();
-    }
-  }
-
-  const statusTone = (status: UploadStatus) => {
-    switch (status) {
-      case 'complete':
-        return 'bg-md-sys-color-primary-container text-md-sys-color-on-primary-container';
-      case 'error':
-        return 'bg-md-sys-color-error/12 text-md-sys-color-error';
-      case 'uploading':
-        return 'bg-md-sys-color-primary/10 text-md-sys-color-primary';
-      default:
-        return 'bg-md-sys-color-surface-variant text-md-sys-color-on-surface-variant';
-    }
-  };
-
-  const statusIcon = (status: UploadStatus) => {
-    switch (status) {
-      case 'complete':
-        return 'check_circle';
-      case 'error':
-        return 'error';
-      case 'uploading':
-        return 'cloud_upload';
-      default:
-        return 'schedule';
-    }
-  };
-
-  const statusLabel = (fileState: FileUploadState) => {
-    switch (fileState.status) {
-      case 'complete':
-        return 'Готово';
-      case 'error':
-        return 'Ошибка';
-      case 'uploading':
-        return `Загрузка — ${formatPercentage(fileState.progress.percentComplete)}%`;
-      default:
-        return 'В очереди';
-    }
-  };
-
-  const progressWidth = (fileState: FileUploadState) =>
-    fileState.status === 'complete' ? 100 : formatPercentage(fileState.progress.percentComplete);
-</script>
-
-<HStack>
-  <Title>{title}</Title>
-  <Label>Максимальный размер файла — 100 Мб.</Label>
-
-  <label
-    for="fileInput"
-    ondragover={handleDragOver}
-    ondragleave={handleDragLeave}
-    ondrop={handleDrop}
-    aria-label="Область загрузки файлов"
-    aria-disabled={readonly}
-    class={`group state-layer relative block ${readonly ? 'cursor-not-allowed opacity-80' : 'cursor-pointer'} focus-within:outline-md-sys-color-primary rounded-lg p-4 focus-within:outline-2 ${
-      isDragging
-        ? ' bg-md-sys-color-primary/6 shadow-elevation-1'
-        : ' bg-md-sys-color-surface-container-high '
-    }`}
-  >
-    <input
-      id="fileInput"
-      type="file"
-      name="file"
-      onchange={handleFileSelect}
-      multiple
-      class="sr-only"
-      disabled={readonly}
-    />
-
-    <div class="flex flex-col items-center gap-3 text-center">
-      <div
-        class={`flex size-12 items-center justify-center rounded-full ${
-          isDragging
-            ? 'bg-md-sys-color-primary text-md-sys-color-on-primary'
-            : 'bg-md-sys-color-primary-container text-md-sys-color-on-primary-container group-hover:bg-md-sys-color-primary group-hover:text-md-sys-color-on-primary'
-        }`}
-      >
-        <Icon name="file_upload" />
-      </div>
-
-      <div class="space-y-1">
-        <p class="md-sys-typescale-title-medium text-md-sys-color-on-surface">
-          Перетащите файлы сюда
-        </p>
-        <p class="md-sys-typescale-body-small text-md-sys-color-on-surface-variant">
-          Или нажмите, чтобы выбрать их на устройстве
-        </p>
-      </div>
-    </div>
-
-    <Layer />
-  </label>
-
-  {#if fileUploads.length > 0}
-    <div class="space-y-3">
-      {#each fileUploads as fileState (fileState.id)}
-        <div class=" bg-md-sys-color-surface-container-high flex items-center gap-3 rounded-lg p-3">
-          {#if fileState.status === 'uploading'}
-            <CircularProgress percent={progressWidth(fileState)} />
-          {:else}
-            <div
-              class={`flex size-10 items-center justify-center rounded-full ${statusTone(fileState.status)}`}
-            >
-              <Icon name={statusIcon(fileState.status)} />
-            </div>
-          {/if}
-
-          <div class="flex-1 space-y-1 overflow-hidden">
-            <p class="md-sys-typescale-body-large text-md-sys-color-on-surface truncate">
-              {fileState.file.name}
-            </p>
-
-            {#if fileState.errorMessage}
-              <p class="md-sys-typescale-body-small text-md-sys-color-error">
-                {fileState.errorMessage}
-              </p>
-            {/if}
-          </div>
-
-          <div class="flex items-center gap-1">
-            {#if fileState.status === 'uploading'}
-              <ButtonIcon
-                variant="text"
-                iconProps={{ name: 'close' }}
-                type="button"
-                onclick={() => cancelUpload(fileState)}
-              ></ButtonIcon>
-            {:else}
-              <ButtonIcon
-                variant="text"
-                iconProps={{ name: 'delete' }}
-                type="button"
-                onclick={() => (fileToRemove = fileState)}
-              ></ButtonIcon>
-            {/if}
-          </div>
-        </div>
-      {/each}
-    </div>
-  {/if}
-</HStack>
-
-<Dialogue
-  open={!!fileToRemove}
-  onconfirm={() => {
-    if (fileToRemove) {
-      removeFile(fileToRemove);
-      fileToRemove = null;
-    }
-  }}
-  confirmText="Удалить"
-  headline="Удаление файла"
-  supportingText={fileToRemove
-    ? `Вы действительно хотите удалить файл "${fileToRemove.file.name}"?`
-    : ''}
-  enhance={null}
-/>

package/dist/components/forms/multipart/Multipart.svelte.d.ts

@@ -1,51 +0,0 @@
-type UploadStatus = 'waiting' | 'uploading' | 'complete' | 'error';
-/**
- * Internal state for a single file upload.
- */
-interface FileUploadState {
-    /** Unique identifier for the upload session */
-    id: string;
-    /** The file being uploaded */
-    file: File;
-    /** Upload progress tracking */
-    progress: {
-        /** Number of chunks uploaded */
-        uploaded: number;
-        /** Total number of chunks */
-        total: number;
-        /** Total bytes uploaded */
-        bytes: number;
-        /** Total size of the file in bytes */
-        totalBytes: number;
-        /** Percentage of upload completed (0-100) */
-        percentComplete: number;
-    };
-    /** Current status of the upload */
-    status: UploadStatus;
-    /** Optional error message if status is 'error' */
-    errorMessage?: string;
-    /** AbortController for cancelling the upload */
-    abortController?: AbortController;
-}
-type $$ComponentProps = {
-    /** Unique ID of the task associated with these uploads */
-    taskId?: string | null;
-    /** ID of the folder where files will be stored */
-    folderId?: string | null;
-    /** Whether the upload area is interactive */
-    readonly?: boolean;
-    /** Initial list of files to display */
-    initialUploads?: FileUploadState[];
-    /** Title displayed above the upload area */
-    title?: string;
-    /** Accessibility label for the upload zone */
-    label?: string;
-};
-/**
- * @component
- * Multipart file upload component that supports chunked uploads for large files.
- * Follows Material 3 design principles for file uploaders.
- */
-declare const Multipart: import("svelte").Component<$$ComponentProps, {}, "">;
-type Multipart = ReturnType<typeof Multipart>;
-export default Multipart;

package/dist/components/forms/multipart/index.d.ts

@@ -1 +0,0 @@
-export { default as Multipart } from './Multipart.svelte';

package/dist/components/forms/multipart/index.js

@@ -1,3 +0,0 @@
-// THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
-// default exports for components in this folder
-export { default as Multipart } from './Multipart.svelte';