@shival99/z-ui 1.8.13 → 1.9.1

package/fesm2022/shival99-z-ui-components-z-gallery.mjs

@@ -186,6 +186,37 @@ class ZGalleryItemComponent {
     formattedSize = computed(() => formatFileSize(this.file().size), ...(ngDevMode ? [{ debugName: "formattedSize" }] : []));
     category = computed(() => getFileCategory(this.file()), ...(ngDevMode ? [{ debugName: "category" }] : []));
     isImage = computed(() => this.category() === 'image', ...(ngDevMode ? [{ debugName: "isImage" }] : []));
+    fileExtension = computed(() => {
+        const fileName = this.file().name;
+        const parts = fileName.split('.');
+        if (parts.length < 2) {
+            return 'FILE';
+        }
+        return parts[parts.length - 1].toUpperCase();
+    }, ...(ngDevMode ? [{ debugName: "fileExtension" }] : []));
+    mediaHeightClass = computed(() => {
+        const size = this.zSize();
+        switch (size) {
+            case 'sm':
+                return 'h-36';
+            case 'lg':
+                return 'h-56';
+            default:
+                return 'h-44';
+        }
+    }, ...(ngDevMode ? [{ debugName: "mediaHeightClass" }] : []));
+    formattedDate = computed(() => {
+        const file = this.file();
+        const date = file.updatedAt || file.createdAt;
+        if (!date) {
+            return null;
+        }
+        return new Intl.DateTimeFormat(undefined, {
+            month: 'short',
+            day: '2-digit',
+            year: 'numeric',
+        }).format(date);
+    }, ...(ngDevMode ? [{ debugName: "formattedDate" }] : []));
     categoryStyle = computed(() => {
         const style = FILE_CATEGORY_STYLES[this.category()];
         return {
@@ -232,30 +263,25 @@ class ZGalleryItemComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZGalleryItemComponent, isStandalone: true, selector: "z-gallery-item", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zShowDownload: { classPropertyName: "zShowDownload", publicName: "zShowDownload", isSignal: true, isRequired: false, transformFunction: null }, zShowPreview: { classPropertyName: "zShowPreview", publicName: "zShowPreview", isSignal: true, isRequired: false, transformFunction: null }, zShowRemove: { classPropertyName: "zShowRemove", publicName: "zShowRemove", isSignal: true, isRequired: false, transformFunction: null }, zSelectable: { classPropertyName: "zSelectable", publicName: "zSelectable", isSignal: true, isRequired: false, transformFunction: null }, zSelected: { classPropertyName: "zSelected", publicName: "zSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnDownload: "zOnDownload", zOnPreview: "zOnPreview", zOnRemove: "zOnRemove", zOnSelect: "zOnSelect" }, host: { classAttribute: "z-gallery-item block" }, ngImport: i0, template: `
     @if (zMode() === 'grid') {
       <div
-        class="group relative cursor-pointer rounded-xl border transition-all duration-200 hover:shadow-md"
-        [class.border-border]="!zSelected()"
-        [class.bg-card]="!zSelected()"
-        [class.shadow-sm]="!zSelected()"
-        [class.hover:border-primary/30]="!zSelected()"
-        [class.border-primary/40]="zSelected()"
-        [class.bg-primary/5]="zSelected()"
-        [class.shadow-primary/15]="zSelected()"
-        [class.shadow-md]="zSelected()"
+        class="group border-border bg-card hover:border-primary/30 relative cursor-pointer overflow-hidden rounded-2xl border shadow-sm transition-all duration-300 hover:shadow-lg"
+        [class.border-primary]="zSelected()"
+        [class.ring-1]="zSelected()"
+        [class.ring-primary/35]="zSelected()"
         (click)="onItemClick()"
       >
         @if (zSelectable()) {
           <div
-            class="bg-primary shadow-card absolute -top-2 -right-2 z-10 flex size-6 items-center justify-center rounded-full transition-all duration-150"
+            class="bg-primary shadow-card absolute top-3 right-3 z-20 flex size-6 items-center justify-center rounded-full transition-all duration-200"
             [class.scale-100]="zSelected()"
             [class.opacity-100]="zSelected()"
-            [class.scale-0]="!zSelected()"
+            [class.scale-90]="!zSelected()"
             [class.opacity-0]="!zSelected()"
           >
             <i z-icon zType="lucideCheck" zSize="14" class="text-primary-foreground"></i>
           </div>
         }
 
-        <div class="relative aspect-square overflow-hidden rounded-t-xl">
+        <div class="relative overflow-hidden" [class]="mediaHeightClass()">
           @if (isImage()) {
             @if (isLoading()) {
               <z-skeleton class="absolute inset-0" />
@@ -263,108 +289,129 @@ class ZGalleryItemComponent {
             <img
               [src]="file().thumbnailUrl || file().url"
               [alt]="file().name"
-              class="size-full object-cover transition-all duration-300"
+              class="size-full object-cover transition-all duration-500"
               [class.opacity-0]="isLoading()"
               [class.scale-100]="!isLoading()"
-              [class.group-hover:scale-105]="!isLoading()"
+              [class.group-hover:scale-110]="!isLoading()"
               loading="lazy"
               (load)="onImageLoad()"
               (error)="onImageError()"
             />
           } @else {
-            <div class="flex size-full flex-col items-center justify-center gap-2" [class]="categoryStyle().bg">
-              <i z-icon [zType]="categoryStyle().icon" zSize="32" [class]="categoryStyle().text"></i>
-              <span class="text-xs font-semibold" [class]="categoryStyle().text">
+            <div
+              class="flex size-full flex-col items-center justify-center gap-2 bg-gradient-to-br"
+              [class]="categoryStyle().bg"
+            >
+              <i z-icon [zType]="categoryStyle().icon" zSize="34" [class]="categoryStyle().text"></i>
+              <span class="text-xs font-semibold tracking-wide" [class]="categoryStyle().text">
                 {{ categoryStyle().label }}
               </span>
             </div>
           }
 
+          <div class="absolute inset-x-0 top-0 z-10 flex items-start justify-between p-3">
+            <span
+              class="rounded-full border border-white/35 bg-black/45 px-2.5 py-1 text-[0.6875rem] font-semibold tracking-wide text-white backdrop-blur-md"
+            >
+              {{ fileExtension() }}
+            </span>
+            <span
+              class="rounded-full border border-white/25 bg-black/35 px-2 py-1 text-[0.625rem] font-medium text-white/95 backdrop-blur-md"
+            >
+              {{ formattedSize() }}
+            </span>
+          </div>
+
           <div
-            class="absolute inset-0 flex items-center justify-center gap-2 bg-black/40 opacity-0 backdrop-blur-[2px] transition-all duration-200 group-hover:opacity-100"
+            class="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-85 transition-opacity duration-300 group-hover:opacity-100"
+          ></div>
+
+          <div
+            class="absolute right-3 bottom-3 z-20 flex items-center gap-1.5 rounded-full border border-white/20 bg-black/40 p-1 opacity-0 backdrop-blur-md transition-all duration-200 group-hover:opacity-100"
           >
             @if (zShowPreview() && canPreview()) {
               <button
                 z-button
                 zType="secondary"
-                zSize="sm"
+                zSize="xs"
                 zShape="circle"
                 class="shadow-lg"
                 (click)="onPreviewClick($event)"
                 z-tooltip
                 [zContent]="'i18n_z_ui_gallery_preview' | translate"
               >
-                <i z-icon zType="lucideEye" zSize="16"></i>
+                <i z-icon zType="lucideEye" zSize="14"></i>
               </button>
             }
             @if (zShowDownload() && (file().downloadUrl || file().url)) {
               <button
                 z-button
                 zType="secondary"
-                zSize="sm"
+                zSize="xs"
                 zShape="circle"
                 class="shadow-lg"
                 (click)="onDownload($event)"
                 z-tooltip
                 [zContent]="'i18n_z_ui_gallery_download' | translate"
               >
-                <i z-icon zType="lucideDownload" zSize="16"></i>
+                <i z-icon zType="lucideDownload" zSize="14"></i>
               </button>
             }
             @if (zShowRemove()) {
               <button
                 z-button
                 zType="secondary"
-                zSize="sm"
+                zSize="xs"
                 zShape="circle"
                 class="shadow-lg"
                 (click)="onRemove($event)"
                 z-tooltip
                 [zContent]="'i18n_z_ui_gallery_remove' | translate"
               >
-                <i z-icon zType="lucideTrash2" zSize="16"></i>
+                <i z-icon zType="lucideTrash2" zSize="14"></i>
               </button>
             }
           </div>
         </div>
 
-        <div class="p-2.5">
-          <p class="text-foreground truncate text-sm font-medium" z-tooltip [zContent]="file().name">
+        <div class="p-3">
+          <p class="text-foreground truncate text-sm leading-none font-semibold" z-tooltip [zContent]="file().name">
             {{ file().name }}
           </p>
-          <p class="text-muted-foreground mt-0.5 text-xs">
-            {{ formattedSize() }}
-          </p>
+          @if (formattedDate()) {
+            <p class="text-muted-foreground mt-1 text-xs">{{ formattedDate() }}</p>
+          }
         </div>
       </div>
     } @else {
       <div
-        class="group flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-2.5 shadow-sm transition-all duration-150 hover:shadow-md"
-        [class.border-border]="!zSelected()"
-        [class.bg-card]="!zSelected()"
-        [class.hover:border-primary/30]="!zSelected()"
-        [class.border-primary/40]="zSelected()"
-        [class.bg-primary/5]="zSelected()"
+        class="group border-border bg-card hover:border-primary/35 flex cursor-pointer items-center gap-3 rounded-xl border px-3 py-2.5 shadow-sm transition-all duration-200 hover:shadow-md"
+        [class.border-primary]="zSelected()"
+        [class.ring-1]="zSelected()"
+        [class.ring-primary/30]="zSelected()"
         (click)="onItemClick()"
       >
         @if (zSelectable()) {
           <div
-            class="bg-primary -ml-1 flex size-5 shrink-0 items-center justify-center rounded-full transition-all duration-150"
+            class="bg-primary -ml-1 flex size-5 shrink-0 items-center justify-center rounded-full transition-all duration-200"
             [class.scale-100]="zSelected()"
             [class.opacity-100]="zSelected()"
-            [class.scale-0]="!zSelected()"
+            [class.scale-90]="!zSelected()"
             [class.opacity-0]="!zSelected()"
           >
             <i z-icon zType="lucideCheck" zSize="12" class="text-primary-foreground"></i>
           </div>
         }
 
-        <div class="flex size-10 shrink-0 items-center justify-center rounded-lg" [class]="categoryStyle().bg">
+        <div
+          class="flex size-11 shrink-0 items-center justify-center rounded-xl border border-white/40 shadow-sm"
+          [class]="categoryStyle().bg"
+        >
           @if (isImage() && (file().thumbnailUrl || file().url)) {
             <img
               [src]="file().thumbnailUrl || file().url"
               [alt]="file().name"
-              class="size-full rounded-lg object-cover"
+              class="size-full rounded-xl object-cover"
               loading="lazy"
             />
           } @else {
@@ -376,16 +423,22 @@ class ZGalleryItemComponent {
           <p class="text-foreground truncate text-sm font-medium" z-tooltip [zContent]="file().name">
             {{ file().name }}
           </p>
-          <p class="text-muted-foreground text-xs">{{ formattedSize() }} · {{ categoryStyle().label }}</p>
+          <p class="text-muted-foreground truncate text-xs">{{ formattedSize() }} · {{ categoryStyle().label }}</p>
         </div>
 
-        <div class="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
+        <div class="ml-auto flex shrink-0 items-center gap-1.5">
+          <span
+            class="text-muted-foreground bg-muted/60 inline-flex min-w-14 items-center justify-center rounded-full border px-2.5 py-1 text-[0.6875rem] font-semibold tracking-wide"
+          >
+            {{ fileExtension() }}
+          </span>
           @if (zShowPreview() && canPreview()) {
             <button
               z-button
               zType="ghost"
               zSize="xs"
               zShape="circle"
+              class="text-muted-foreground hover:text-foreground"
               (click)="onPreviewClick($event)"
               z-tooltip
               [zContent]="'i18n_z_ui_gallery_preview' | translate"
@@ -399,6 +452,7 @@ class ZGalleryItemComponent {
               zType="ghost"
               zSize="xs"
               zShape="circle"
+              class="text-muted-foreground hover:text-foreground"
               (click)="onDownload($event)"
               z-tooltip
               [zContent]="'i18n_z_ui_gallery_download' | translate"
@@ -412,6 +466,7 @@ class ZGalleryItemComponent {
               zType="ghost"
               zSize="xs"
               zShape="circle"
+              class="text-muted-foreground hover:text-destructive"
               (click)="onRemove($event)"
               z-tooltip
               [zContent]="'i18n_z_ui_gallery_remove' | translate"
@@ -433,30 +488,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     template: `
     @if (zMode() === 'grid') {
       <div
-        class="group relative cursor-pointer rounded-xl border transition-all duration-200 hover:shadow-md"
-        [class.border-border]="!zSelected()"
-        [class.bg-card]="!zSelected()"
-        [class.shadow-sm]="!zSelected()"
-        [class.hover:border-primary/30]="!zSelected()"
-        [class.border-primary/40]="zSelected()"
-        [class.bg-primary/5]="zSelected()"
-        [class.shadow-primary/15]="zSelected()"
-        [class.shadow-md]="zSelected()"
+        class="group border-border bg-card hover:border-primary/30 relative cursor-pointer overflow-hidden rounded-2xl border shadow-sm transition-all duration-300 hover:shadow-lg"
+        [class.border-primary]="zSelected()"
+        [class.ring-1]="zSelected()"
+        [class.ring-primary/35]="zSelected()"
         (click)="onItemClick()"
       >
         @if (zSelectable()) {
           <div
-            class="bg-primary shadow-card absolute -top-2 -right-2 z-10 flex size-6 items-center justify-center rounded-full transition-all duration-150"
+            class="bg-primary shadow-card absolute top-3 right-3 z-20 flex size-6 items-center justify-center rounded-full transition-all duration-200"
             [class.scale-100]="zSelected()"
             [class.opacity-100]="zSelected()"
-            [class.scale-0]="!zSelected()"
+            [class.scale-90]="!zSelected()"
             [class.opacity-0]="!zSelected()"
           >
             <i z-icon zType="lucideCheck" zSize="14" class="text-primary-foreground"></i>
           </div>
         }
 
-        <div class="relative aspect-square overflow-hidden rounded-t-xl">
+        <div class="relative overflow-hidden" [class]="mediaHeightClass()">
           @if (isImage()) {
             @if (isLoading()) {
               <z-skeleton class="absolute inset-0" />
@@ -464,108 +514,129 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             <img
               [src]="file().thumbnailUrl || file().url"
               [alt]="file().name"
-              class="size-full object-cover transition-all duration-300"
+              class="size-full object-cover transition-all duration-500"
               [class.opacity-0]="isLoading()"
               [class.scale-100]="!isLoading()"
-              [class.group-hover:scale-105]="!isLoading()"
+              [class.group-hover:scale-110]="!isLoading()"
               loading="lazy"
               (load)="onImageLoad()"
               (error)="onImageError()"
             />
           } @else {
-            <div class="flex size-full flex-col items-center justify-center gap-2" [class]="categoryStyle().bg">
-              <i z-icon [zType]="categoryStyle().icon" zSize="32" [class]="categoryStyle().text"></i>
-              <span class="text-xs font-semibold" [class]="categoryStyle().text">
+            <div
+              class="flex size-full flex-col items-center justify-center gap-2 bg-gradient-to-br"
+              [class]="categoryStyle().bg"
+            >
+              <i z-icon [zType]="categoryStyle().icon" zSize="34" [class]="categoryStyle().text"></i>
+              <span class="text-xs font-semibold tracking-wide" [class]="categoryStyle().text">
                 {{ categoryStyle().label }}
               </span>
             </div>
           }
 
+          <div class="absolute inset-x-0 top-0 z-10 flex items-start justify-between p-3">
+            <span
+              class="rounded-full border border-white/35 bg-black/45 px-2.5 py-1 text-[0.6875rem] font-semibold tracking-wide text-white backdrop-blur-md"
+            >
+              {{ fileExtension() }}
+            </span>
+            <span
+              class="rounded-full border border-white/25 bg-black/35 px-2 py-1 text-[0.625rem] font-medium text-white/95 backdrop-blur-md"
+            >
+              {{ formattedSize() }}
+            </span>
+          </div>
+
           <div
-            class="absolute inset-0 flex items-center justify-center gap-2 bg-black/40 opacity-0 backdrop-blur-[2px] transition-all duration-200 group-hover:opacity-100"
+            class="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-85 transition-opacity duration-300 group-hover:opacity-100"
+          ></div>
+
+          <div
+            class="absolute right-3 bottom-3 z-20 flex items-center gap-1.5 rounded-full border border-white/20 bg-black/40 p-1 opacity-0 backdrop-blur-md transition-all duration-200 group-hover:opacity-100"
           >
             @if (zShowPreview() && canPreview()) {
               <button
                 z-button
                 zType="secondary"
-                zSize="sm"
+                zSize="xs"
                 zShape="circle"
                 class="shadow-lg"
                 (click)="onPreviewClick($event)"
                 z-tooltip
                 [zContent]="'i18n_z_ui_gallery_preview' | translate"
               >
-                <i z-icon zType="lucideEye" zSize="16"></i>
+                <i z-icon zType="lucideEye" zSize="14"></i>
               </button>
             }
             @if (zShowDownload() && (file().downloadUrl || file().url)) {
               <button
                 z-button
                 zType="secondary"
-                zSize="sm"
+                zSize="xs"
                 zShape="circle"
                 class="shadow-lg"
                 (click)="onDownload($event)"
                 z-tooltip
                 [zContent]="'i18n_z_ui_gallery_download' | translate"
               >
-                <i z-icon zType="lucideDownload" zSize="16"></i>
+                <i z-icon zType="lucideDownload" zSize="14"></i>
               </button>
             }
             @if (zShowRemove()) {
               <button
                 z-button
                 zType="secondary"
-                zSize="sm"
+                zSize="xs"
                 zShape="circle"
                 class="shadow-lg"
                 (click)="onRemove($event)"
                 z-tooltip
                 [zContent]="'i18n_z_ui_gallery_remove' | translate"
               >
-                <i z-icon zType="lucideTrash2" zSize="16"></i>
+                <i z-icon zType="lucideTrash2" zSize="14"></i>
               </button>
             }
           </div>
         </div>
 
-        <div class="p-2.5">
-          <p class="text-foreground truncate text-sm font-medium" z-tooltip [zContent]="file().name">
+        <div class="p-3">
+          <p class="text-foreground truncate text-sm leading-none font-semibold" z-tooltip [zContent]="file().name">
             {{ file().name }}
           </p>
-          <p class="text-muted-foreground mt-0.5 text-xs">
-            {{ formattedSize() }}
-          </p>
+          @if (formattedDate()) {
+            <p class="text-muted-foreground mt-1 text-xs">{{ formattedDate() }}</p>
+          }
         </div>
       </div>
     } @else {
       <div
-        class="group flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-2.5 shadow-sm transition-all duration-150 hover:shadow-md"
-        [class.border-border]="!zSelected()"
-        [class.bg-card]="!zSelected()"
-        [class.hover:border-primary/30]="!zSelected()"
-        [class.border-primary/40]="zSelected()"
-        [class.bg-primary/5]="zSelected()"
+        class="group border-border bg-card hover:border-primary/35 flex cursor-pointer items-center gap-3 rounded-xl border px-3 py-2.5 shadow-sm transition-all duration-200 hover:shadow-md"
+        [class.border-primary]="zSelected()"
+        [class.ring-1]="zSelected()"
+        [class.ring-primary/30]="zSelected()"
         (click)="onItemClick()"
       >
         @if (zSelectable()) {
           <div
-            class="bg-primary -ml-1 flex size-5 shrink-0 items-center justify-center rounded-full transition-all duration-150"
+            class="bg-primary -ml-1 flex size-5 shrink-0 items-center justify-center rounded-full transition-all duration-200"
             [class.scale-100]="zSelected()"
             [class.opacity-100]="zSelected()"
-            [class.scale-0]="!zSelected()"
+            [class.scale-90]="!zSelected()"
             [class.opacity-0]="!zSelected()"
           >
             <i z-icon zType="lucideCheck" zSize="12" class="text-primary-foreground"></i>
           </div>
         }
 
-        <div class="flex size-10 shrink-0 items-center justify-center rounded-lg" [class]="categoryStyle().bg">
+        <div
+          class="flex size-11 shrink-0 items-center justify-center rounded-xl border border-white/40 shadow-sm"
+          [class]="categoryStyle().bg"
+        >
           @if (isImage() && (file().thumbnailUrl || file().url)) {
             <img
               [src]="file().thumbnailUrl || file().url"
               [alt]="file().name"
-              class="size-full rounded-lg object-cover"
+              class="size-full rounded-xl object-cover"
               loading="lazy"
             />
           } @else {
@@ -577,16 +648,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
           <p class="text-foreground truncate text-sm font-medium" z-tooltip [zContent]="file().name">
             {{ file().name }}
           </p>
-          <p class="text-muted-foreground text-xs">{{ formattedSize() }} · {{ categoryStyle().label }}</p>
+          <p class="text-muted-foreground truncate text-xs">{{ formattedSize() }} · {{ categoryStyle().label }}</p>
         </div>
 
-        <div class="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
+        <div class="ml-auto flex shrink-0 items-center gap-1.5">
+          <span
+            class="text-muted-foreground bg-muted/60 inline-flex min-w-14 items-center justify-center rounded-full border px-2.5 py-1 text-[0.6875rem] font-semibold tracking-wide"
+          >
+            {{ fileExtension() }}
+          </span>
           @if (zShowPreview() && canPreview()) {
             <button
               z-button
               zType="ghost"
               zSize="xs"
               zShape="circle"
+              class="text-muted-foreground hover:text-foreground"
               (click)="onPreviewClick($event)"
               z-tooltip
               [zContent]="'i18n_z_ui_gallery_preview' | translate"
@@ -600,6 +677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
               zType="ghost"
               zSize="xs"
               zShape="circle"
+              class="text-muted-foreground hover:text-foreground"
               (click)="onDownload($event)"
               z-tooltip
               [zContent]="'i18n_z_ui_gallery_download' | translate"
@@ -613,6 +691,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
               zType="ghost"
               zSize="xs"
               zShape="circle"
+              class="text-muted-foreground hover:text-destructive"
               (click)="onRemove($event)"
               z-tooltip
               [zContent]="'i18n_z_ui_gallery_remove' | translate"
@@ -813,10 +892,10 @@ class ZGalleryPreviewComponent {
 
       <div class="flex h-full w-full flex-col items-center" (click)="$event.stopPropagation()">
         <div
-          class="dark:!border-border absolute top-4 left-1/2 z-10 flex -translate-x-1/2 items-center gap-2 rounded-[6px] border !border-transparent bg-black/60 px-4 py-2 text-sm text-white backdrop-blur-sm dark:border"
+          class="dark:!border-border absolute top-4 left-1/2 z-10 flex -translate-x-1/2 items-center gap-2 rounded-[0.375rem] border !border-transparent bg-black/60 px-4 py-2 text-sm text-white backdrop-blur-sm dark:border"
         >
           <div>
-            <span class="max-w-[200px] truncate font-medium">{{ file().name }}</span>
+            <span class="max-w-[12.5rem] truncate font-medium">{{ file().name }}</span>
             <span class="text-white/70">{{ formattedSize() }}</span>
           </div>
 
@@ -1013,10 +1092,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 
       <div class="flex h-full w-full flex-col items-center" (click)="$event.stopPropagation()">
         <div
-          class="dark:!border-border absolute top-4 left-1/2 z-10 flex -translate-x-1/2 items-center gap-2 rounded-[6px] border !border-transparent bg-black/60 px-4 py-2 text-sm text-white backdrop-blur-sm dark:border"
+          class="dark:!border-border absolute top-4 left-1/2 z-10 flex -translate-x-1/2 items-center gap-2 rounded-[0.375rem] border !border-transparent bg-black/60 px-4 py-2 text-sm text-white backdrop-blur-sm dark:border"
         >
           <div>
-            <span class="max-w-[200px] truncate font-medium">{{ file().name }}</span>
+            <span class="max-w-[12.5rem] truncate font-medium">{{ file().name }}</span>
             <span class="text-white/70">{{ formattedSize() }}</span>
           </div>
 
@@ -1221,7 +1300,7 @@ const zGalleryFileIconVariants = cva('flex items-center justify-center rounded-m
         },
     },
     compoundVariants: [
-        { zMode: 'list', zSize: 'sm', class: 'size-8 text-[10px]' },
+        { zMode: 'list', zSize: 'sm', class: 'size-8 text-[0.625rem]' },
         { zMode: 'list', zSize: 'default', class: 'size-10 text-xs' },
         { zMode: 'list', zSize: 'lg', class: 'size-12 text-sm' },
     ],
@@ -1459,7 +1538,7 @@ class ZGalleryComponent {
 
       @if (zSelectable() && filteredFiles().length > 0) {
         <div
-          class="bg-muted/30 shadow-card dark:!border-border mb-4 flex h-11 items-center justify-between gap-3 rounded-[6px] border border-transparent px-3"
+          class="bg-muted/30 shadow-card dark:!border-border mb-4 flex h-11 items-center justify-between gap-3 rounded-[0.375rem] border border-transparent px-3"
         >
           <div class="flex items-center gap-3">
             <z-checkbox
@@ -1573,7 +1652,7 @@ class ZGalleryComponent {
         />
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZGalleryItemComponent, selector: "z-gallery-item", inputs: ["file", "zMode", "zSize", "zShowDownload", "zShowPreview", "zShowRemove", "zSelectable", "zSelected"], outputs: ["zOnDownload", "zOnPreview", "zOnRemove", "zOnSelect"] }, { kind: "component", type: ZGalleryPreviewComponent, selector: "z-gallery-preview", inputs: ["file", "files", "zShowRemove"], outputs: ["zOnClose", "zOnDownload", "zOnNavigate", "zOnRemove"] }, { kind: "component", type: ZButtonGroupComponent, selector: "z-button-group", inputs: ["zClass", "zOrientation", "zActive"], outputs: ["zActiveChange"], exportAs: ["zButtonGroup"] }, { kind: "directive", type: ZButtonGroupItemDirective, selector: "[z-button-group-item]", exportAs: ["zButtonGroupItem"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZCheckboxComponent, selector: "z-checkbox", inputs: ["class", "zType", "zSize", "zLabel", "zText", "zDisabled", "zIndeterminate", "zValue", "zOptions", "zOrientation", "zCheckAll", "zCheckAllText", "zChecked", "zGroupValue"], outputs: ["zChange", "zGroupChange", "zOnBlur", "zOnFocus", "zControl", "zEvent", "zCheckedChange", "zGroupValueChange"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZGalleryItemComponent, selector: "z-gallery-item", inputs: ["file", "zMode", "zSize", "zShowDownload", "zShowPreview", "zShowRemove", "zSelectable", "zSelected"], outputs: ["zOnDownload", "zOnPreview", "zOnRemove", "zOnSelect"] }, { kind: "component", type: ZGalleryPreviewComponent, selector: "z-gallery-preview", inputs: ["file", "files", "zShowRemove"], outputs: ["zOnClose", "zOnDownload", "zOnNavigate", "zOnRemove"] }, { kind: "component", type: ZButtonGroupComponent, selector: "z-button-group", inputs: ["zClass", "zOrientation", "zActive"], outputs: ["zActiveChange"], exportAs: ["zButtonGroup"] }, { kind: "directive", type: ZButtonGroupItemDirective, selector: "[z-button-group-item]", exportAs: ["zButtonGroupItem"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZCheckboxComponent, selector: "z-checkbox", inputs: ["class", "zType", "zSize", "zLabel", "zText", "zDisabled", "zIndeterminate", "zValue", "zOptions", "zOrientation", "zCheckAll", "zCheckAllText", "zChecked", "zGroupValue"], outputs: ["zChange", "zGroupChange", "zOnBlur", "zOnFocus", "zControl", "zEvent", "zCheckedChange", "zGroupValueChange"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZGalleryComponent, decorators: [{
             type: Component,
@@ -1629,7 +1708,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 
       @if (zSelectable() && filteredFiles().length > 0) {
         <div
-          class="bg-muted/30 shadow-card dark:!border-border mb-4 flex h-11 items-center justify-between gap-3 rounded-[6px] border border-transparent px-3"
+          class="bg-muted/30 shadow-card dark:!border-border mb-4 flex h-11 items-center justify-between gap-3 rounded-[0.375rem] border border-transparent px-3"
         >
           <div class="flex items-center gap-3">
             <z-checkbox