nuvox 0.1.0 → 0.1.1

package/dist/react/index.css

@@ -2468,7 +2468,9 @@
   min-inline-size: 0;
   overflow: hidden;
   background: var(--color-surfaceRaised, #f3f4f6);
+  border: var(--border-widthThin, 1px) var(--border-style, solid) var(--color-border, transparent);
   border-radius: var(--radius-full, 9999px);
+  box-shadow: var(--shadow-xs, none);
 }
 .nx-progress__fill {
   block-size: 100%;
@@ -3585,84 +3587,40 @@
 }
 
 /* src/react/Popover.css */
-.nx-progress-wrap {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm, 8px);
-  inline-size: 100%;
+.nx-popover__content {
+  z-index: 1060;
+  box-sizing: border-box;
+  min-inline-size: 12rem;
+  max-inline-size: min(24rem, calc(100vw - 16px));
+  max-block-size: calc(100vh - 16px);
+  overflow: auto;
+  padding: var(--spacing-md, 16px);
+  margin: 0;
+  background: var(--color-surface, #ffffff);
+  color: var(--color-text, #111827);
+  border: var(--border-widthThin, 1px) var(--border-style, solid) var(--color-border, #e5e7eb);
+  border-radius: var(--radius-lg, 12px);
+  box-shadow: var(--shadow-lg, 0 10px 24px rgba(0, 0, 0, 0.18));
   font-family: var(--typography-fontSans, system-ui, sans-serif);
+  font-size: var(--typography-sizeSm, 14px);
+  animation: nx-popover-in var(--motion-durationFast, 120ms) var(--motion-easeStandard, ease);
 }
-.nx-progress {
-  position: relative;
-  flex: 1;
-  min-inline-size: 0;
-  overflow: hidden;
-  background: var(--color-surfaceRaised, #f3f4f6);
-  border: var(--border-widthThin, 1px) var(--border-style, solid) var(--color-border, transparent);
-  border-radius: var(--radius-full, 9999px);
-  box-shadow: var(--shadow-xs, none);
-}
-.nx-progress__fill {
-  block-size: 100%;
-  inline-size: 0;
-  border-radius: inherit;
-  background: var(--color-brand-500, #6366f1);
-  transition: inline-size var(--motion-durationNormal, 180ms) var(--motion-easeStandard, ease);
-}
-.nx-progress--success .nx-progress__fill {
-  background: var(--color-success-base, #16a34a);
-}
-.nx-progress--warning .nx-progress__fill {
-  background: var(--color-warning-base, #d97706);
-}
-.nx-progress--danger .nx-progress__fill {
-  background: var(--color-danger-base, #ef4444);
-}
-.nx-progress--xs {
-  block-size: 4px;
-}
-.nx-progress--sm {
-  block-size: 6px;
-}
-.nx-progress--md {
-  block-size: 8px;
-}
-.nx-progress--lg {
-  block-size: 12px;
-}
-.nx-progress--xl {
-  block-size: 16px;
-}
-.nx-progress__value {
-  flex-shrink: 0;
-  font-size: var(--typography-sizeXs, 12px);
-  font-variant-numeric: tabular-nums;
-  color: var(--color-textMuted, #6b7280);
-  min-inline-size: 3ch;
-  text-align: end;
-}
-.nx-progress--indeterminate .nx-progress__fill {
-  inline-size: 40%;
-  border-radius: var(--radius-full, 9999px);
-  animation: nx-progress-indeterminate 1.2s var(--motion-easeStandard, ease) infinite;
-  will-change: transform;
+.nx-popover__content:focus-visible {
+  outline: none;
 }
-@keyframes nx-progress-indeterminate {
-  0% {
-    transform: translateX(-120%);
+@keyframes nx-popover-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.98);
   }
-  100% {
-    transform: translateX(320%);
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .nx-progress__fill {
-    transition-duration: 0.01ms;
-  }
-  .nx-progress--indeterminate .nx-progress__fill {
-    animation: none;
-    inline-size: 60%;
-    transform: none;
+  .nx-popover__content {
+    animation-duration: 0.01ms;
   }
 }