@roy-ui/ui 0.0.14 → 0.0.16

package/dist/{UploadFiles-VBIEAV7L.css → UploadFiles-QEAOV3R6.css}

@@ -8,7 +8,7 @@
   --royui-upload-muted: rgba(255, 255, 255, 0.52);
   --royui-upload-faint: rgba(255, 255, 255, 0.38);
   --royui-upload-line: rgba(255, 255, 255, 0.12);
-  --royui-upload-dash: rgba(255, 255, 255, 0.16);
+  --royui-upload-dash: rgba(255, 255, 255, 0.09);
   --royui-upload-drop-bg: rgba(255, 255, 255, 0.015);
   --royui-upload-tile: #202023;
   --royui-upload-track: rgba(255, 255, 255, 0.14);
@@ -20,6 +20,9 @@
 
   --royui-upload-radius: 18px;
   --royui-upload-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
+  /* Captions, sizes, and percentages use a thin Inter rather than mono. */
+  --royui-upload-meta-font: 'Inter', -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 
   box-sizing: border-box;
   width: 100%;
@@ -46,7 +49,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 2px 4px 16px;
+  padding: 0 4px 10px;
 }
 .royui-upload__title {
   margin: 0;
@@ -128,8 +131,9 @@
 }
 .royui-upload__drop-hint {
   margin: 0;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-family: var(--royui-upload-meta-font);
   font-size: 11px;
+  font-weight: 350;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--royui-upload-faint);
@@ -142,18 +146,21 @@
 .royui-upload__list {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  margin-top: 12px;
+  gap: 8px;
+  margin-top: 10px;
 }
 .royui-upload__row {
   display: flex;
-  align-items: flex-start;
-  gap: 14px;
-  padding: 14px;
-  border-radius: 12px;
+  align-items: center;
+  gap: 11px;
+  padding: 10px 11px;
+  border-radius: 10px;
   background: var(--royui-upload-row);
   box-shadow: inset 0 0 0 1px var(--royui-upload-row-line);
   animation: royui-upload-row-in 280ms var(--royui-upload-ease) both;
+  transition:
+    background 220ms var(--royui-upload-ease),
+    box-shadow 220ms var(--royui-upload-ease);
 }
 @keyframes royui-upload-row-in {
   from {
@@ -171,9 +178,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
-  border-radius: 11px;
+  width: 32px;
+  height: 32px;
+  border-radius: 9px;
   background: var(--royui-upload-badge, #8b8b94);
   background-image: linear-gradient(
     150deg,
@@ -185,9 +192,9 @@
     0 2px 6px -2px rgba(0, 0, 0, 0.45);
 }
 .royui-upload__badge-label {
-  font-size: 9px;
+  font-size: 8px;
   font-weight: 700;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.03em;
   color: #fff;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
 }
@@ -195,16 +202,15 @@
 .royui-upload__row-main {
   flex: 1;
   min-width: 0;
-}
-.royui-upload__row-top {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
+  flex-direction: column;
+  justify-content: center;
 }
 .royui-upload__name {
-  font-size: 14px;
-  font-weight: 500;
+  display: block;
+  font-size: 13px;
+  font-weight: 450;
+  letter-spacing: -0.005em;
   color: var(--royui-upload-fg);
   white-space: nowrap;
   overflow: hidden;
@@ -212,14 +218,15 @@
 }
 .royui-upload__row-action {
   flex: none;
+  align-self: center;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 26px;
-  height: 26px;
+  width: 30px;
+  height: 30px;
   padding: 0;
   border: none;
-  border-radius: 7px;
+  border-radius: 8px;
   background: transparent;
   color: var(--royui-upload-faint);
   cursor: pointer;
@@ -237,9 +244,10 @@
   display: flex;
   align-items: center;
   gap: 7px;
-  margin-top: 5px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: 11px;
+  margin-top: 4px;
+  font-family: var(--royui-upload-meta-font);
+  font-size: 10.5px;
+  font-weight: 350;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: var(--royui-upload-muted);
@@ -285,13 +293,13 @@
 .royui-upload__progress {
   display: flex;
   align-items: center;
-  gap: 12px;
-  margin-top: 11px;
+  gap: 11px;
+  margin-top: 8px;
 }
 .royui-upload__bar {
   position: relative;
   flex: 1;
-  height: 14px;
+  height: 12px;
   border-radius: 2px;
   overflow: hidden;
   background-image: repeating-linear-gradient(
@@ -313,10 +321,11 @@
 }
 .royui-upload__pct {
   flex: none;
-  min-width: 34px;
+  min-width: 32px;
   text-align: right;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: 12px;
+  font-family: var(--royui-upload-meta-font);
+  font-size: 11px;
+  font-weight: 400;
   font-variant-numeric: tabular-nums;
   color: var(--royui-upload-muted);
 }
@@ -330,26 +339,6 @@
   padding: 14px 4px 2px;
   border-top: 1px solid var(--royui-upload-line);
 }
-.royui-upload__icon-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
-  padding: 0;
-  border: none;
-  border-radius: 7px;
-  background: transparent;
-  color: var(--royui-upload-faint);
-  cursor: pointer;
-  transition:
-    background 140ms var(--royui-upload-ease),
-    color 140ms var(--royui-upload-ease);
-}
-.royui-upload__icon-btn:hover {
-  background: var(--royui-upload-hover);
-  color: var(--royui-upload-fg);
-}
 .royui-upload__remove-all {
   display: inline-flex;
   align-items: center;
@@ -357,20 +346,255 @@
   padding: 0;
   border: none;
   background: none;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-family: var(--royui-upload-meta-font);
   font-size: 11px;
+  font-weight: 400;
   letter-spacing: 0.07em;
   text-transform: uppercase;
   color: var(--royui-upload-muted);
   cursor: pointer;
   transition: color 140ms var(--royui-upload-ease);
 }
+.royui-upload__remove-all svg {
+  width: 16px;
+  height: 16px;
+}
 .royui-upload__remove-all:hover {
   color: var(--royui-upload-fg);
 }
+.royui-upload__footer-inner {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  animation: royui-upload-swap 240ms var(--royui-upload-ease);
+}
+@keyframes royui-upload-swap {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
 .royui-upload__footer-spacer {
   flex: 1;
 }
+.royui-upload__textbtn {
+  padding: 0;
+  border: none;
+  background: none;
+  font-family: var(--royui-upload-meta-font);
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--royui-upload-muted);
+  cursor: pointer;
+  transition: color 140ms var(--royui-upload-ease);
+}
+.royui-upload__textbtn:hover {
+  color: var(--royui-upload-fg);
+}
+
+/* ── Clickable filename (preview trigger) ───────────────────────────────── */
+.royui-upload__name--button {
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: none;
+  background: none;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: color 140ms var(--royui-upload-ease);
+}
+.royui-upload__name--button:hover {
+  color: var(--royui-upload-accent);
+}
+
+/* ── Selection mode ─────────────────────────────────────────────────────── */
+.royui-upload--selecting .royui-upload__row {
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+}
+.royui-upload__row.is-selected {
+  background: color-mix(in srgb, var(--royui-upload-accent) 12%, var(--royui-upload-row));
+  box-shadow: inset 0 0 0 1px var(--royui-upload-accent);
+}
+.royui-upload__check {
+  flex: none;
+  align-self: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  color: #fff;
+  background: transparent;
+  box-shadow: inset 0 0 0 1.5px var(--royui-upload-line);
+  animation: royui-upload-pop-in 200ms var(--royui-upload-ease);
+  transition:
+    background 160ms var(--royui-upload-ease),
+    box-shadow 160ms var(--royui-upload-ease);
+}
+@keyframes royui-upload-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+.royui-upload__check.is-checked svg {
+  animation: royui-upload-pop-in 160ms var(--royui-upload-ease);
+}
+.royui-upload__check.is-checked {
+  background: var(--royui-upload-accent);
+  box-shadow: inset 0 0 0 1.5px var(--royui-upload-accent);
+}
+
+/* ── Preview modal ──────────────────────────────────────────────────────── */
+.royui-upload__modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: rgba(0, 0, 0, 0.6);
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+  animation: royui-upload-fade 160ms var(--royui-upload-ease);
+}
+@keyframes royui-upload-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.royui-upload__modal-panel {
+  display: flex;
+  flex-direction: column;
+  width: min(640px, 100%);
+  max-height: min(80vh, 720px);
+  background: var(--royui-upload-bg);
+  color: var(--royui-upload-fg);
+  border-radius: 14px;
+  box-shadow:
+    0 0 0 1px var(--royui-upload-line),
+    0 30px 80px -28px rgba(0, 0, 0, 0.7);
+  animation: royui-upload-pop 180ms var(--royui-upload-ease);
+}
+@keyframes royui-upload-pop {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+.royui-upload__modal-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 14px 14px 18px;
+  border-bottom: 1px solid var(--royui-upload-line);
+}
+.royui-upload__modal-title {
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.royui-upload__modal-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 18px;
+  overflow: auto;
+}
+.royui-upload__preview-img {
+  max-width: 100%;
+  max-height: 60vh;
+  border-radius: 8px;
+  object-fit: contain;
+}
+.royui-upload__preview-frame {
+  width: 100%;
+  height: 60vh;
+  border: none;
+  border-radius: 8px;
+  background: #fff;
+}
+.royui-upload__preview-video {
+  max-width: 100%;
+  max-height: 60vh;
+  border-radius: 8px;
+}
+.royui-upload__preview-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 24px 12px;
+  text-align: center;
+}
+.royui-upload__preview-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 14px;
+  background: var(--royui-upload-badge, #8b8b94);
+  background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.28), transparent 55%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
+  margin-bottom: 4px;
+}
+.royui-upload__preview-badge .royui-upload__badge-label {
+  font-size: 13px;
+}
+.royui-upload__preview-name {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 500;
+}
+.royui-upload__preview-sub {
+  margin: 0;
+  font-family: var(--royui-upload-meta-font);
+  font-size: 11px;
+  font-weight: 350;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--royui-upload-muted);
+}
+.royui-upload__preview-empty {
+  margin: 6px 0 0;
+  font-size: 13px;
+  color: var(--royui-upload-faint);
+}
+.royui-upload__preview-download {
+  margin-top: 8px;
+  color: var(--royui-upload-accent);
+  font-size: 13px;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
 
 /* Footer action — retint the depth Button per theme so the label always
    reads. Dark panel: a light pill with dark ink (matches the reference).
@@ -395,7 +619,7 @@
   --royui-upload-muted: rgba(0, 0, 0, 0.55);
   --royui-upload-faint: rgba(0, 0, 0, 0.4);
   --royui-upload-line: rgba(0, 0, 0, 0.09);
-  --royui-upload-dash: rgba(0, 0, 0, 0.16);
+  --royui-upload-dash: rgba(0, 0, 0, 0.1);
   --royui-upload-drop-bg: rgba(0, 0, 0, 0.012);
   --royui-upload-tile: #ffffff;
   --royui-upload-track: rgba(0, 0, 0, 0.12);
@@ -433,7 +657,7 @@
     --royui-upload-muted: rgba(0, 0, 0, 0.55);
     --royui-upload-faint: rgba(0, 0, 0, 0.4);
     --royui-upload-line: rgba(0, 0, 0, 0.09);
-    --royui-upload-dash: rgba(0, 0, 0, 0.16);
+    --royui-upload-dash: rgba(0, 0, 0, 0.1);
     --royui-upload-drop-bg: rgba(0, 0, 0, 0.012);
     --royui-upload-tile: #ffffff;
     --royui-upload-track: rgba(0, 0, 0, 0.12);
@@ -467,6 +691,14 @@
 @media (prefers-reduced-motion: reduce) {
   .royui-upload__row {
     animation: none;
+    transition: none;
+  }
+  .royui-upload__footer-inner,
+  .royui-upload__check,
+  .royui-upload__check.is-checked svg,
+  .royui-upload__modal,
+  .royui-upload__modal-panel {
+    animation: none;
   }
   .royui-upload__bar-fill {
     transition: none;