@semiont/react-ui 0.5.10 → 0.5.11

package/dist/index.css

@@ -1,115 +1,3 @@
-/* src/components/Toast.css */
-.semiont-toast-container {
-  position: fixed;
-  top: 1rem;
-  right: 1rem;
-  z-index: 50;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  max-width: 24rem;
-}
-.semiont-toast {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
-  border-radius: var(--semiont-radius-lg);
-  border: 1px solid;
-  box-shadow: var(--semiont-shadow-lg);
-  transition: all var(--semiont-duration-base) var(--semiont-ease);
-  transform: translateX(0);
-  animation: slideIn var(--semiont-duration-base) var(--semiont-ease);
-}
-[data-theme=dark] .semiont-toast {
-  box-shadow: var(--semiont-shadow-lg);
-}
-@keyframes slideIn {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-.semiont-toast-icon-wrapper {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.semiont-toast-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-.semiont-toast-message {
-  flex: 1;
-  font-size: var(--semiont-text-sm);
-  font-weight: var(--semiont-font-medium);
-}
-.semiont-toast-close {
-  margin-left: auto;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 0.25rem;
-  border-radius: var(--semiont-radius-base);
-  transition: opacity var(--semiont-duration-fast) var(--semiont-ease);
-}
-.semiont-toast-close:hover {
-  opacity: 0.7;
-}
-.semiont-toast-close-icon {
-  width: 1rem;
-  height: 1rem;
-}
-.semiont-toast[data-variant=success] {
-  background-color: var(--semiont-color-green-100);
-  border-color: var(--semiont-color-green-300);
-  color: var(--semiont-color-green-800);
-}
-.semiont-toast[data-variant=error] {
-  background-color: var(--semiont-color-red-100);
-  border-color: var(--semiont-color-red-300);
-  color: var(--semiont-color-red-800);
-}
-.semiont-toast[data-variant=warning] {
-  background-color: var(--semiont-color-yellow-100);
-  border-color: var(--semiont-color-yellow-300);
-  color: var(--semiont-color-yellow-900);
-}
-.semiont-toast[data-variant=info] {
-  background-color: var(--semiont-color-blue-100);
-  border-color: var(--semiont-color-blue-300);
-  color: var(--semiont-color-blue-800);
-}
-[data-theme=dark] .semiont-toast[data-variant=success] {
-  background-color: rgba(34, 197, 94, 0.1);
-  border-color: var(--semiont-color-green-600);
-  color: var(--semiont-color-green-300);
-}
-[data-theme=dark] .semiont-toast[data-variant=error] {
-  background-color: rgba(239, 68, 68, 0.1);
-  border-color: var(--semiont-color-red-600);
-  color: var(--semiont-color-red-300);
-}
-[data-theme=dark] .semiont-toast[data-variant=warning] {
-  background-color: rgba(245, 158, 11, 0.1);
-  border-color: var(--semiont-color-amber-600);
-  color: var(--semiont-color-yellow-300);
-}
-[data-theme=dark] .semiont-toast[data-variant=info] {
-  background-color: rgba(59, 130, 246, 0.1);
-  border-color: var(--semiont-color-blue-600);
-  color: var(--semiont-color-blue-300);
-}
-
 /* src/components/ProtectedErrorBoundary.css */
 .semiont-protected-error-boundary-container {
   min-height: 400px;
@@ -291,6 +179,118 @@
   outline: none;
 }
 
+/* src/components/Toast.css */
+.semiont-toast-container {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-width: 24rem;
+}
+.semiont-toast {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-radius: var(--semiont-radius-lg);
+  border: 1px solid;
+  box-shadow: var(--semiont-shadow-lg);
+  transition: all var(--semiont-duration-base) var(--semiont-ease);
+  transform: translateX(0);
+  animation: slideIn var(--semiont-duration-base) var(--semiont-ease);
+}
+[data-theme=dark] .semiont-toast {
+  box-shadow: var(--semiont-shadow-lg);
+}
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+.semiont-toast-icon-wrapper {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.semiont-toast-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.semiont-toast-message {
+  flex: 1;
+  font-size: var(--semiont-text-sm);
+  font-weight: var(--semiont-font-medium);
+}
+.semiont-toast-close {
+  margin-left: auto;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: var(--semiont-radius-base);
+  transition: opacity var(--semiont-duration-fast) var(--semiont-ease);
+}
+.semiont-toast-close:hover {
+  opacity: 0.7;
+}
+.semiont-toast-close-icon {
+  width: 1rem;
+  height: 1rem;
+}
+.semiont-toast[data-variant=success] {
+  background-color: var(--semiont-color-green-100);
+  border-color: var(--semiont-color-green-300);
+  color: var(--semiont-color-green-800);
+}
+.semiont-toast[data-variant=error] {
+  background-color: var(--semiont-color-red-100);
+  border-color: var(--semiont-color-red-300);
+  color: var(--semiont-color-red-800);
+}
+.semiont-toast[data-variant=warning] {
+  background-color: var(--semiont-color-yellow-100);
+  border-color: var(--semiont-color-yellow-300);
+  color: var(--semiont-color-yellow-900);
+}
+.semiont-toast[data-variant=info] {
+  background-color: var(--semiont-color-blue-100);
+  border-color: var(--semiont-color-blue-300);
+  color: var(--semiont-color-blue-800);
+}
+[data-theme=dark] .semiont-toast[data-variant=success] {
+  background-color: rgba(34, 197, 94, 0.1);
+  border-color: var(--semiont-color-green-600);
+  color: var(--semiont-color-green-300);
+}
+[data-theme=dark] .semiont-toast[data-variant=error] {
+  background-color: rgba(239, 68, 68, 0.1);
+  border-color: var(--semiont-color-red-600);
+  color: var(--semiont-color-red-300);
+}
+[data-theme=dark] .semiont-toast[data-variant=warning] {
+  background-color: rgba(245, 158, 11, 0.1);
+  border-color: var(--semiont-color-amber-600);
+  color: var(--semiont-color-yellow-300);
+}
+[data-theme=dark] .semiont-toast[data-variant=info] {
+  background-color: rgba(59, 130, 246, 0.1);
+  border-color: var(--semiont-color-blue-600);
+  color: var(--semiont-color-blue-300);
+}
+
 /* src/components/toolbar/Toolbar.css */
 .semiont-annotate-toolbar {
   display: flex;
@@ -469,6 +469,15 @@
 .semiont-toolbar-menu-label {
   font-size: 0.875rem;
 }
+.semiont-annotate-toolbar--compact {
+  gap: 0.375rem;
+  padding: 0.25rem 0;
+  background: transparent;
+  border-bottom: none;
+}
+.semiont-annotate-toolbar--compact .semiont-dropdown-label {
+  display: none;
+}
 
 /* src/components/settings/SettingsPanel.css */
 .semiont-settings-panel {
@@ -4248,6 +4257,35 @@
   border-radius: var(--semiont-radius-base);
   font-size: var(--semiont-font-size-xs);
 }
+.semiont-resource-tag__remove {
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  font-size: var(--semiont-font-size-xs);
+  cursor: pointer;
+  opacity: 0.7;
+}
+.semiont-resource-tag__remove:hover:not(:disabled) {
+  opacity: 1;
+}
+.semiont-resource-tag__remove:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+.semiont-resource-tag--add {
+  cursor: pointer;
+  background: none;
+}
+.semiont-resource-tag--add:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+.semiont-resource-tags-inline--editing .semiont-form__entity-type-buttons {
+  margin-top: var(--semiont-spacing-xs);
+}
 [data-theme=dark] .semiont-resource-tags-inline {
   border-top-color: var(--semiont-color-neutral-700);
 }