@neo-ui-kit/react 1.0.0 → 1.0.1

package/dist/components/feedback/EmptyState/styles.css

@@ -1,80 +1,80 @@
-/* Styles owned by EmptyState: the icon floats in a breathing halo, the text rises in after it. */
-.ad-empty-state {
-  padding: 1.5625rem 0.9375rem;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-.ad-empty-state > * {
-  min-width: 0;
-  max-width: 100%;
-}
-.ad-empty-state > .ad-button {
-  height: auto;
-  min-height: var(--ad-size-h);
-  padding-block: 0.5em;
-}
-.ad-empty-state .ad-button-label {
-  white-space: normal;
-}
-.ad-empty-state > .ad-icon {
-  position: relative;
-  isolation: isolate;
-  animation: ad-empty-float 4s ease-in-out infinite;
-}
-.ad-empty-state > .ad-icon::before {
-  content: "";
-  position: absolute;
-  z-index: -1;
-  inset: -55%;
-  border-radius: 50%;
-  background: radial-gradient(closest-side, rgb(from var(--ad-primary) r g b / 0.33), transparent);
-  animation: ad-empty-halo 4s ease-in-out infinite;
-}
-.ad-empty-state > :not(.ad-icon) {
-  animation: ad-empty-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
-}
-.ad-empty-state > :nth-child(3) {
-  animation-delay: 0.08s;
-}
-.ad-empty-state > :nth-child(4) {
-  animation-delay: 0.16s;
-}
-.ad-empty-state h3 {
-  font-size: 1.125rem;
-  margin: 0.9375rem 0 0.3125rem;
-}
-.ad-empty-state p {
-  font-size: 0.8125rem;
-  color: var(--ad-muted);
-  margin: 0 0 1.0625rem;
-}
-@keyframes ad-empty-float {
-  0%,
-  100% {
-    transform: translateY(0) rotate(-4deg);
-  }
-  50% {
-    transform: translateY(-0.5rem) rotate(4deg);
-  }
-}
-@keyframes ad-empty-halo {
-  0%,
-  100% {
-    opacity: 0.55;
-    scale: 0.85;
-  }
-  50% {
-    opacity: 1;
-    scale: 1.1;
-  }
-}
-@keyframes ad-empty-rise {
-  from {
-    opacity: 0;
-    transform: translateY(0.75rem);
-  }
-}
+/* Styles owned by EmptyState: the icon floats in a breathing halo, the text rises in after it. */
+.ad-empty-state {
+  padding: 1.5625rem 0.9375rem;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.ad-empty-state > * {
+  min-width: 0;
+  max-width: 100%;
+}
+.ad-empty-state > .ad-button {
+  height: auto;
+  min-height: var(--ad-size-h);
+  padding-block: 0.5em;
+}
+.ad-empty-state .ad-button-label {
+  white-space: normal;
+}
+.ad-empty-state > .ad-icon {
+  position: relative;
+  isolation: isolate;
+  animation: ad-empty-float 4s ease-in-out infinite;
+}
+.ad-empty-state > .ad-icon::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  inset: -55%;
+  border-radius: 50%;
+  background: radial-gradient(closest-side, rgb(from var(--ad-primary) r g b / 0.33), transparent);
+  animation: ad-empty-halo 4s ease-in-out infinite;
+}
+.ad-empty-state > :not(.ad-icon) {
+  animation: ad-empty-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+.ad-empty-state > :nth-child(3) {
+  animation-delay: 0.08s;
+}
+.ad-empty-state > :nth-child(4) {
+  animation-delay: 0.16s;
+}
+.ad-empty-state h3 {
+  font-size: 1.125rem;
+  margin: 0.9375rem 0 0.3125rem;
+}
+.ad-empty-state p {
+  font-size: 0.8125rem;
+  color: var(--ad-muted);
+  margin: 0 0 1.0625rem;
+}
+@keyframes ad-empty-float {
+  0%,
+  100% {
+    transform: translateY(0) rotate(-4deg);
+  }
+  50% {
+    transform: translateY(-0.5rem) rotate(4deg);
+  }
+}
+@keyframes ad-empty-halo {
+  0%,
+  100% {
+    opacity: 0.55;
+    scale: 0.85;
+  }
+  50% {
+    opacity: 1;
+    scale: 1.1;
+  }
+}
+@keyframes ad-empty-rise {
+  from {
+    opacity: 0;
+    transform: translateY(0.75rem);
+  }
+}

package/dist/components/feedback/KeyValueList/styles.css

@@ -1,51 +1,51 @@
-/* Styles owned by KeyValueList: rows slide in one by one and highlight on hover. */
-.ad-key-value-list {
-  display: grid;
-  gap: 0.125rem;
-  margin: 0;
-  font-size: 0.8125rem;
-}
-.ad-key-value-list > div {
-  display: grid;
-  min-width: 0;
-  /* Neither column may push the list wider than its container. */
-  grid-template-columns: minmax(min(7.5rem, 40%), 1fr) minmax(0, 1.2fr);
-  align-items: center;
-  gap: 1.125rem;
-  padding: 0.45rem 0.6rem;
-  border-radius: 0.5rem;
-  transition: background 0.25s;
-  animation: ad-kv-row 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
-}
-.ad-key-value-list > div:nth-child(2) {
-  animation-delay: 0.07s;
-}
-.ad-key-value-list > div:nth-child(3) {
-  animation-delay: 0.14s;
-}
-.ad-key-value-list > div:nth-child(n + 4) {
-  animation-delay: 0.21s;
-}
-.ad-key-value-list > div:hover {
-  background: #ffffff08;
-}
-.ad-key-value-list dt {
-  min-width: 0;
-  overflow-wrap: anywhere;
-  color: var(--ad-muted);
-  transition: color 0.25s;
-}
-.ad-key-value-list > div:hover dt {
-  color: var(--ad-pink);
-}
-.ad-key-value-list dd {
-  min-width: 0;
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-@keyframes ad-kv-row {
-  from {
-    opacity: 0;
-    transform: translateX(-0.6rem);
-  }
-}
+/* Styles owned by KeyValueList: rows slide in one by one and highlight on hover. */
+.ad-key-value-list {
+  display: grid;
+  gap: 0.125rem;
+  margin: 0;
+  font-size: 0.8125rem;
+}
+.ad-key-value-list > div {
+  display: grid;
+  min-width: 0;
+  /* Neither column may push the list wider than its container. */
+  grid-template-columns: minmax(min(7.5rem, 40%), 1fr) minmax(0, 1.2fr);
+  align-items: center;
+  gap: 1.125rem;
+  padding: 0.45rem 0.6rem;
+  border-radius: 0.5rem;
+  transition: background 0.25s;
+  animation: ad-kv-row 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+.ad-key-value-list > div:nth-child(2) {
+  animation-delay: 0.07s;
+}
+.ad-key-value-list > div:nth-child(3) {
+  animation-delay: 0.14s;
+}
+.ad-key-value-list > div:nth-child(n + 4) {
+  animation-delay: 0.21s;
+}
+.ad-key-value-list > div:hover {
+  background: #ffffff08;
+}
+.ad-key-value-list dt {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--ad-muted);
+  transition: color 0.25s;
+}
+.ad-key-value-list > div:hover dt {
+  color: var(--ad-pink);
+}
+.ad-key-value-list dd {
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+@keyframes ad-kv-row {
+  from {
+    opacity: 0;
+    transform: translateX(-0.6rem);
+  }
+}

package/dist/components/feedback/MenuItem/styles.css

@@ -1,71 +1,71 @@
-/* Menu row: plain icon and label, a soft highlight on hover or keyboard focus. */
-.ad-menu-item {
-  --ad-menu-item-tone: var(--ad-neutral-200);
-  appearance: none;
-  inline-size: 100%;
-  min-inline-size: 0;
-  min-block-size: 2.5rem;
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 0.7rem;
-  padding: 0.4rem 0.7rem;
-  border: 0;
-  border-radius: calc(var(--ad-radius) * 0.65);
-  background: transparent;
-  color: var(--ad-menu-item-tone);
-  text-align: left;
-  font-family: inherit;
-  font-size: var(--ad-font-size-body-sm);
-  font-weight: 600;
-  line-height: 1.2;
-  cursor: pointer;
-  transition:
-    background 0.14s,
-    color 0.14s;
-}
-.ad-menu-item:hover:not(:disabled),
-.ad-menu-item:focus-visible {
-  outline: 0;
-  background: #ffffff10;
-  color: #fff;
-}
-.ad-menu-item:active:not(:disabled) {
-  background: #ffffff1a;
-}
-.ad-menu-item:disabled {
-  opacity: 0.38;
-  cursor: not-allowed;
-}
-.ad-menu-item-icon,
-.ad-menu-item-end {
-  display: grid;
-  place-items: center;
-  color: var(--ad-neutral-400);
-}
-.ad-menu-item-icon > .ad-icon {
-  --ad-icon-size: 1.15rem;
-}
-.ad-menu-item:hover:not(:disabled) .ad-menu-item-icon {
-  color: var(--ad-pink);
-}
-.ad-menu-item-label {
-  min-inline-size: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.ad-menu-item-end > .ad-icon {
-  --ad-icon-size: 1rem;
-}
-.ad-menu-item[data-ad-tone="error"] {
-  --ad-menu-item-tone: var(--ad-secondary);
-}
-.ad-menu-item[data-ad-tone="error"] .ad-menu-item-icon {
-  color: var(--ad-secondary);
-}
-.ad-menu-item[data-ad-tone="error"]:hover:not(:disabled),
-.ad-menu-item[data-ad-tone="error"]:focus-visible {
-  background: rgb(from var(--ad-primary) r g b / 0.13);
-  color: var(--ad-secondary-200);
-}
+/* Menu row: plain icon and label, a soft highlight on hover or keyboard focus. */
+.ad-menu-item {
+  --ad-menu-item-tone: var(--ad-neutral-200);
+  appearance: none;
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 2.5rem;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.7rem;
+  padding: 0.4rem 0.7rem;
+  border: 0;
+  border-radius: calc(var(--ad-radius) * 0.65);
+  background: transparent;
+  color: var(--ad-menu-item-tone);
+  text-align: left;
+  font-family: inherit;
+  font-size: var(--ad-font-size-body-sm);
+  font-weight: 600;
+  line-height: 1.2;
+  cursor: pointer;
+  transition:
+    background 0.14s,
+    color 0.14s;
+}
+.ad-menu-item:hover:not(:disabled),
+.ad-menu-item:focus-visible {
+  outline: 0;
+  background: #ffffff10;
+  color: #fff;
+}
+.ad-menu-item:active:not(:disabled) {
+  background: #ffffff1a;
+}
+.ad-menu-item:disabled {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+.ad-menu-item-icon,
+.ad-menu-item-end {
+  display: grid;
+  place-items: center;
+  color: var(--ad-neutral-400);
+}
+.ad-menu-item-icon > .ad-icon {
+  --ad-icon-size: 1.15rem;
+}
+.ad-menu-item:hover:not(:disabled) .ad-menu-item-icon {
+  color: var(--ad-pink);
+}
+.ad-menu-item-label {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ad-menu-item-end > .ad-icon {
+  --ad-icon-size: 1rem;
+}
+.ad-menu-item[data-ad-tone="error"] {
+  --ad-menu-item-tone: var(--ad-secondary);
+}
+.ad-menu-item[data-ad-tone="error"] .ad-menu-item-icon {
+  color: var(--ad-secondary);
+}
+.ad-menu-item[data-ad-tone="error"]:hover:not(:disabled),
+.ad-menu-item[data-ad-tone="error"]:focus-visible {
+  background: rgb(from var(--ad-primary) r g b / 0.13);
+  color: var(--ad-secondary-200);
+}

package/dist/components/feedback/Popover/styles.css

@@ -1,44 +1,44 @@
-/* Styles owned by Popover: unfolds from its anchor side, rows arrive in a quick cascade. */
-.ad-popover {
-  min-width: min(14.6875rem, var(--ad-popover-available-width, calc(100vw - 1rem)));
-  max-width: min(21.875rem, var(--ad-popover-available-width, calc(100vw - 1rem)));
-  max-height: var(--ad-popover-available-height, calc(100dvh - 1rem));
-  overflow: auto;
-  overflow-wrap: anywhere;
-  transform-origin: var(--ad-popover-anchor-x, 50%) top;
-  animation: ad-popover-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
-}
-.ad-popover[data-ad-side="above"] {
-  transform-origin: var(--ad-popover-anchor-x, 50%) bottom;
-}
-:is(.ad-option-list, .ad-menu) > :is(.ad-option, .ad-menu-item) {
-  animation: ad-row-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
-}
-:is(.ad-option-list, .ad-menu) > :nth-child(2) {
-  animation-delay: 0.03s;
-}
-:is(.ad-option-list, .ad-menu) > :nth-child(3) {
-  animation-delay: 0.06s;
-}
-:is(.ad-option-list, .ad-menu) > :nth-child(4) {
-  animation-delay: 0.09s;
-}
-:is(.ad-option-list, .ad-menu) > :nth-child(5) {
-  animation-delay: 0.12s;
-}
-:is(.ad-option-list, .ad-menu) > :nth-child(n + 6) {
-  animation-delay: 0.15s;
-}
-@keyframes ad-popover-in {
-  from {
-    opacity: 0;
-    transform: translateY(-0.35rem) scale(0.96);
-    filter: blur(0.25rem);
-  }
-}
-@keyframes ad-row-in {
-  from {
-    opacity: 0;
-    transform: translateX(-0.4rem);
-  }
-}
+/* Styles owned by Popover: unfolds from its anchor side, rows arrive in a quick cascade. */
+.ad-popover {
+  min-width: min(14.6875rem, var(--ad-popover-available-width, calc(100vw - 1rem)));
+  max-width: min(21.875rem, var(--ad-popover-available-width, calc(100vw - 1rem)));
+  max-height: var(--ad-popover-available-height, calc(100dvh - 1rem));
+  overflow: auto;
+  overflow-wrap: anywhere;
+  transform-origin: var(--ad-popover-anchor-x, 50%) top;
+  animation: ad-popover-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
+}
+.ad-popover[data-ad-side="above"] {
+  transform-origin: var(--ad-popover-anchor-x, 50%) bottom;
+}
+:is(.ad-option-list, .ad-menu) > :is(.ad-option, .ad-menu-item) {
+  animation: ad-row-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+:is(.ad-option-list, .ad-menu) > :nth-child(2) {
+  animation-delay: 0.03s;
+}
+:is(.ad-option-list, .ad-menu) > :nth-child(3) {
+  animation-delay: 0.06s;
+}
+:is(.ad-option-list, .ad-menu) > :nth-child(4) {
+  animation-delay: 0.09s;
+}
+:is(.ad-option-list, .ad-menu) > :nth-child(5) {
+  animation-delay: 0.12s;
+}
+:is(.ad-option-list, .ad-menu) > :nth-child(n + 6) {
+  animation-delay: 0.15s;
+}
+@keyframes ad-popover-in {
+  from {
+    opacity: 0;
+    transform: translateY(-0.35rem) scale(0.96);
+    filter: blur(0.25rem);
+  }
+}
+@keyframes ad-row-in {
+  from {
+    opacity: 0;
+    transform: translateX(-0.4rem);
+  }
+}