@vifui/styles 0.6.0-alpha.10 → 0.6.0-alpha.11

package/components/upload.css

@@ -25,7 +25,6 @@
   /* Sizing */
   width: 200px;
   height: 200px;
-  margin: 15px;
 
   /* Appearance */
   background: var(--color-neutral-100);
@@ -76,7 +75,7 @@
 }
 
 .vif-upload__input-icon {
-  @apply size-12;
+  @apply size-10;
   color: var(--muted);
   transition: all 200ms var(--ease-smooth);
 
@@ -203,12 +202,15 @@
 .vif-upload__file-icon-wrapper {
   @apply flex flex-col items-center justify-center gap-2;
   @apply p-4;
+  @apply w-full h-full;
+  @apply overflow-hidden;
 }
 
 .vif-upload__file-icon {
-  @apply size-16;
+  @apply size-12;
   opacity: 0.2;
   color: var(--muted);
+  flex-shrink: 0;
 }
 
 .vif-upload__file-name {
@@ -217,6 +219,7 @@
   @apply truncate;
   @apply px-2;
   color: var(--foreground);
+  word-break: break-word;
 }
 
 /* ============================================ */
@@ -395,7 +398,7 @@
 
 .vif-upload__viewer {
   @apply fixed inset-0;
-  @apply z-1500;
+  @apply z-15000;
   @apply flex items-center justify-center;
   @apply p-5;
 
@@ -430,6 +433,7 @@
   @apply rounded-full;
   @apply p-3;
   @apply border-0;
+  @apply z-15001;
 
   background: rgba(0, 0, 0, 0.5);
   cursor: var(--cursor-interactive);
@@ -460,6 +464,22 @@
   height: 150px;
 }
 
+.vif-upload--sm .vif-upload__input-icon {
+  @apply size-8;
+}
+
+.vif-upload--sm .vif-upload__input-text {
+  @apply text-xs;
+}
+
+.vif-upload--sm .vif-upload__input-hint {
+  @apply text-[10px];
+}
+
+.vif-upload--sm .vif-upload__file-icon {
+  @apply size-10;
+}
+
 .vif-upload--lg .vif-upload__input-zone {
   width: 250px;
   height: 250px;
@@ -470,6 +490,22 @@
   height: 250px;
 }
 
+.vif-upload--lg .vif-upload__input-icon {
+  @apply size-14;
+}
+
+.vif-upload--lg .vif-upload__input-text {
+  @apply text-base;
+}
+
+.vif-upload--lg .vif-upload__input-hint {
+  @apply text-sm;
+}
+
+.vif-upload--lg .vif-upload__file-icon {
+  @apply size-16;
+}
+
 /* ============================================ */
 /* Single Variant (Avatar-style) */
 /* ============================================ */
@@ -485,10 +521,38 @@
   @apply rounded-full;
   width: 120px;
   height: 120px;
+  overflow: hidden;
 }
 
 .vif-upload--single .vif-upload__file-image {
   @apply rounded-full;
+  @apply object-cover;
+  @apply w-full h-full;
+}
+
+.vif-upload--single .vif-upload__file-icon-wrapper {
+  @apply p-2;
+}
+
+.vif-upload--single .vif-upload__file-icon {
+  @apply size-8;
+}
+
+.vif-upload--single .vif-upload__file-name {
+  @apply text-[10px];
+  @apply px-1;
+}
+
+.vif-upload--single .vif-upload__input-icon {
+  @apply size-8;
+}
+
+.vif-upload--single .vif-upload__input-text {
+  @apply text-xs;
+}
+
+.vif-upload--single .vif-upload__input-hint {
+  @apply text-[10px];
 }
 
 /* ============================================ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vifui/styles",
-  "version": "0.6.0-alpha.10",
+  "version": "0.6.0-alpha.11",
   "description": "CSS styles and design tokens for VifUI",
   "license": "MIT",
   "type": "module",