@tomny-dev/uzi 0.1.8 → 0.1.9-pr.2.2.1

package/dist/index.css

@@ -360,15 +360,41 @@
 }
 
 /* src/components/modal/modal.module.css */
-.backdrop {
+.portalLayer {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.55);
+  z-index: 100;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 16px;
-  z-index: 100;
+}
+.backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+}
+.backdrop[data-state=open] {
+  animation: backdropFadeIn 160ms ease;
+}
+.backdrop[data-state=closed] {
+  animation: backdropFadeOut 140ms ease;
+}
+.overlayContent {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  max-height: 100%;
+  outline: none;
+}
+.overlayContent[data-state=open] {
+  animation: modalContentIn 180ms ease;
+}
+.overlayContent[data-state=closed] {
+  animation: modalContentOut 140ms ease;
 }
 .modal {
   background: var(--background, #0f172a);
@@ -449,6 +475,42 @@
   gap: 8px;
   margin-top: 20px;
 }
+@keyframes backdropFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes backdropFadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes modalContentIn {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@keyframes modalContentOut {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(4px) scale(0.98);
+  }
+}
 
 /* src/components/alert/alert.module.css */
 .alert {
@@ -538,9 +600,19 @@
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
   animation: toastSlideIn 180ms ease-out;
 }
-.toast.exit {
+.toast[data-state=closed] {
   animation: toastSlideOut 160ms ease-in forwards;
 }
+.toast[data-swipe=move] {
+  transform: translateX(var(--radix-toast-swipe-move-x));
+}
+.toast[data-swipe=cancel] {
+  transform: translateX(0);
+  transition: transform 180ms ease-out;
+}
+.toast[data-swipe=end] {
+  animation: toastSwipeOut 160ms ease-out forwards;
+}
 .icon {
   width: 18px;
   height: 18px;
@@ -597,6 +669,11 @@
   opacity: 1;
   background: var(--toast-button-bg, rgba(0, 0, 0, 0.1));
 }
+.closeButton:focus-visible,
+.actionButton:focus-visible {
+  outline: var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
+}
 @keyframes toastSlideIn {
   from {
     opacity: 0;
@@ -617,6 +694,16 @@
     transform: translateY(-6px);
   }
 }
+@keyframes toastSwipeOut {
+  from {
+    opacity: 1;
+    transform: translateX(var(--radix-toast-swipe-end-x));
+  }
+  to {
+    opacity: 0;
+    transform: translateX(calc(var(--radix-toast-swipe-end-x) * 1.05));
+  }
+}
 
 /* src/components/input/input.module.css */
 .input {
@@ -673,38 +760,84 @@
   opacity: 0.5;
 }
 
-/* src/components/dropdown/dropdown.module.css */
+/* src/components/multi-select/multi-select.module.css */
 .wrapper {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+}
+.wrapper-fullWidth {
+  width: 100%;
 }
 .trigger {
-  display: flex;
+  width: 100%;
+  min-width: 0;
+  min-height: 2.125rem;
+  display: inline-flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
-  padding: 6px 10px 6px 14px;
-  background: var(--ts-dropdown-bg, var(--panel, #111827));
-  border: 1px solid var(--ts-dropdown-border, var(--border, #1f2937));
+  gap: 0.625rem;
   border-radius: 8px;
+  border: 1px solid var(--ts-dropdown-border, var(--border, #1f2937));
+  background: var(--ts-dropdown-bg, var(--panel, #111827));
   color: var(--ts-dropdown-text, var(--text, #e2e8f0));
+  padding: 6px 12px 6px 14px;
   font-size: 0.85rem;
-  font-weight: 500;
+  line-height: 1.25rem;
+  font-family: inherit;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 1px 2px rgba(0, 0, 0, 0.12);
+  transition:
+    border-color 0.15s ease,
+    background 0.15s ease,
+    color 0.15s ease,
+    box-shadow 0.15s ease;
   cursor: pointer;
-  white-space: nowrap;
-  transition: border-color 0.15s;
-  user-select: none;
+  text-align: left;
 }
-.trigger:hover {
+.trigger:hover:not(:disabled) {
   border-color: var(--ts-dropdown-accent, var(--accent, #22d3ee));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.16);
 }
-.trigger:focus-visible {
+.trigger:focus-visible,
+.trigger[data-state=open] {
+  border-color: var(--ts-dropdown-accent, var(--primary, #22d3ee));
   outline: var(--focus-ring);
   outline-offset: var(--focus-ring-offset);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 0 1px color-mix(in srgb, var(--primary, #22d3ee) 30%, transparent);
 }
-.trigger-active {
-  border-color: var(--ts-dropdown-accent, var(--accent, #22d3ee));
-  color: var(--ts-dropdown-accent, var(--accent, #22d3ee));
+.trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  box-shadow: none;
+}
+.value {
+  min-width: 0;
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  align-items: center;
+}
+.placeholder {
+  color: var(--muted-foreground, #94a3b8);
+}
+.chip {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  padding: 2px 8px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--primary, #22d3ee) 32%, transparent);
+  background: color-mix(in srgb, var(--primary, #22d3ee) 10%, transparent);
+  color: var(--ts-dropdown-text, var(--text, #e2e8f0));
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+.chip-summary {
+  color: var(--primary, #22d3ee);
 }
 .chevron {
   width: 10px;
@@ -712,62 +845,238 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: transform 0.15s;
   color: var(--muted, #94a3b8);
   flex-shrink: 0;
+  transition: transform 0.15s ease, color 0.15s ease;
 }
-.chevron-open {
+.trigger:hover:not(:disabled) .chevron,
+.trigger[data-state=open] .chevron {
+  color: var(--ts-dropdown-text, var(--text, #e2e8f0));
+}
+.trigger[data-state=open] .chevron {
   transform: rotate(180deg);
 }
 .menu {
   position: absolute;
   top: calc(100% + 6px);
   left: 0;
+  z-index: 50;
   min-width: 100%;
-  background: var(--ts-dropdown-bg, var(--panel, #111827));
-  border: 1px solid var(--ts-dropdown-border, var(--border, #1f2937));
+  max-height: 16rem;
+  overflow-y: auto;
+  border: 1px solid var(--ts-menu-border, var(--border, #1f2937));
   border-radius: 10px;
-  padding: 4px;
-  z-index: 50;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
-  animation: dropdownFadeIn 0.1s ease;
+  background: var(--ts-menu-bg, var(--popover, var(--panel, #111827)));
+  color: var(--ts-menu-fg, var(--popover-foreground, var(--text, #e2e8f0)));
+  padding: 0.25rem;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
+  animation: menuFadeIn 140ms ease;
+}
+.option {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  border: none;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: inherit;
+  padding: 0.5rem 0.625rem;
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+.option:hover:not(:disabled),
+.option:focus-visible,
+.option[data-highlighted] {
+  background: var(--ts-menu-hover-bg, var(--accent, rgba(255, 255, 255, 0.06)));
+  color: var(--ts-menu-hover-fg, var(--accent-foreground, var(--foreground, #e2e8f0)));
+  outline: none;
+}
+.option-disabled,
+.option[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.option-selected .option-label {
+  color: var(--primary, #22d3ee);
+}
+.indicator {
+  width: 1rem;
+  height: 1rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 0.3125rem;
+  border: 1px solid var(--border, #1f2937);
+  color: transparent;
+  background: transparent;
+  transition:
+    border-color 0.12s ease,
+    background 0.12s ease,
+    color 0.12s ease;
+}
+.indicator-selected {
+  border-color: color-mix(in srgb, var(--primary, #22d3ee) 55%, transparent);
+  background: color-mix(in srgb, var(--primary, #22d3ee) 12%, transparent);
+  color: var(--primary, #22d3ee);
+}
+.indicator-disabled {
+  opacity: 0.65;
 }
-@keyframes dropdownFadeIn {
+.option-label {
+  min-width: 0;
+  flex: 1;
+}
+@keyframes menuFadeIn {
   from {
     opacity: 0;
-    transform: translateY(-4px);
+    transform: translateY(-4px) scale(0.98);
   }
   to {
     opacity: 1;
-    transform: translateY(0);
+    transform: translateY(0) scale(1);
   }
 }
-.option {
-  display: block;
+
+/* src/components/select/select.module.css */
+.wrapper {
+  position: relative;
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+}
+.wrapper-fullWidth {
   width: 100%;
-  padding: 8px 12px;
-  border-radius: 6px;
+}
+.wrapper:not(.wrapper-fullWidth) .select {
+  width: auto;
+}
+.select {
+  width: 100%;
+  min-width: 0;
+  min-height: 2.125rem;
+  border-radius: 8px;
+  border: 1px solid var(--ts-dropdown-border, var(--border, #1f2937));
+  background: var(--ts-dropdown-bg, var(--panel, #111827));
+  color: var(--ts-dropdown-text, var(--text, #e2e8f0));
+  padding: 6px 32px 6px 14px;
   font-size: 0.85rem;
+  line-height: 1.25rem;
+  font-family: inherit;
   font-weight: 500;
-  color: var(--muted, #94a3b8);
-  background: none;
-  border: none;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 1px 2px rgba(0, 0, 0, 0.12);
+  transition:
+    border-color 0.15s ease,
+    background 0.15s ease,
+    color 0.15s ease,
+    box-shadow 0.15s ease;
   cursor: pointer;
   text-align: left;
   white-space: nowrap;
-  transition: background 0.1s, color 0.1s;
 }
-.option:hover {
-  background: var(--accent, color-mix(in srgb, var(--primary, #22d3ee) 8%, transparent));
-  color: var(--ts-dropdown-text, var(--text, #e2e8f0));
+.select:hover:not(:disabled) {
+  border-color: var(--ts-dropdown-accent, var(--accent, #22d3ee));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.16);
 }
-.option:focus-visible {
+.select:focus-visible {
+  border-color: var(--ts-dropdown-accent, var(--primary, #22d3ee));
   outline: var(--focus-ring);
   outline-offset: var(--focus-ring-offset);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 0 1px color-mix(in srgb, var(--primary, #22d3ee) 30%, transparent);
+}
+.select[data-placeholder] {
+  color: var(--muted-foreground, #94a3b8);
+}
+.select:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  box-shadow: none;
+}
+.chevron {
+  width: 10px;
+  height: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--muted, #94a3b8);
+  flex-shrink: 0;
+  margin-left: auto;
+  transition: transform 0.15s ease, color 0.15s ease;
+}
+.select:hover:not(:disabled) .chevron,
+.select[data-state=open] .chevron {
+  color: var(--ts-dropdown-text, var(--text, #e2e8f0));
+}
+.select[data-state=open] .chevron {
+  transform: rotate(180deg);
+}
+.content {
+  z-index: 50;
+  min-width: var(--radix-select-trigger-width);
+  max-height: min(18rem, var(--radix-select-content-available-height));
+  overflow: hidden;
+  border: 1px solid var(--ts-menu-border, var(--border, #1f2937));
+  border-radius: 0.625rem;
+  background: var(--ts-menu-bg, var(--popover, var(--panel, #111827)));
+  color: var(--ts-menu-fg, var(--popover-foreground, var(--text, #e2e8f0)));
+  padding: 0.25rem;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
+  animation: selectFadeIn 140ms ease;
+}
+.viewport {
+  max-height: inherit;
+  overflow-y: auto;
+}
+.item {
+  position: relative;
+  display: flex;
+  width: 100%;
+  cursor: default;
+  user-select: none;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.625rem 0.5rem 2rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  outline: none;
 }
-.option-selected {
+.item[data-highlighted] {
+  background: var(--ts-menu-hover-bg, var(--accent, rgba(255, 255, 255, 0.06)));
+  color: var(--ts-menu-hover-fg, var(--accent-foreground, var(--foreground, #e2e8f0)));
+}
+.item[data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.item[data-state=checked] {
   color: var(--primary, #22d3ee);
-  background: color-mix(in srgb, var(--primary, #22d3ee) 8%, transparent);
+}
+.indicator {
+  position: absolute;
+  left: 0.625rem;
+  display: inline-flex;
+  width: 1rem;
+  height: 1rem;
+  align-items: center;
+  justify-content: center;
+  color: currentColor;
+}
+.indicatorIcon {
+  display: block;
+}
+@keyframes selectFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
 /* src/components/dropdown-menu/dropdown-menu.module.css */
@@ -1340,4 +1649,55 @@ button.uziSidebarNavItem {
     font-size: 13px;
   }
 }
+
+/* src/components/skeleton/skeleton.module.css */
+.skeleton {
+  background: color-mix(in srgb, var(--muted-foreground, #94a3b8) 14%, var(--background, #0f172a));
+  animation: skeleton-pulse 1.6s ease-in-out infinite;
+}
+@keyframes skeleton-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.45;
+  }
+}
+.radius-sm {
+  border-radius: 4px;
+}
+.radius-md {
+  border-radius: 8px;
+}
+.radius-lg {
+  border-radius: 12px;
+}
+.radius-full {
+  border-radius: 9999px;
+}
+
+/* src/components/progress/progress.module.css */
+.track {
+  height: 8px;
+  border-radius: 9999px;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--border, #1f2937) 60%, transparent);
+}
+.fill {
+  height: 100%;
+  border-radius: 9999px;
+  transition: width 0.4s ease;
+}
+.tone-default {
+  background: var(--foreground, #e2e8f0);
+}
+.tone-success {
+  background: var(--success, hsl(142 71% 45%));
+}
+.tone-warning {
+  background: var(--warning, hsl(38 92% 50%));
+}
+.tone-danger {
+  background: var(--destructive, #f87171);
+}
 /*# sourceMappingURL=index.css.map */