@neo-ui-kit/react 1.0.0 → 1.0.2

package/dist/components/layout/Avatar/styles.css

@@ -1,108 +1,108 @@
-/* Styles owned by Avatar: a slowly turning neon ring; it speeds up and the face lifts on hover. */
-.ad-avatar {
-  --ad-avatar: 3rem;
-  position: relative;
-  isolation: isolate;
-  width: var(--ad-avatar);
-  height: var(--ad-avatar);
-  display: grid;
-  place-items: center;
-  flex: none;
-  border-radius: 50%;
-  font-size: calc(var(--ad-avatar) * 0.42);
-  font-weight: 700;
-  color: #fff;
-  text-shadow: 0 0 0.5em var(--ad-primary);
-  background:
-    radial-gradient(circle at 35% 25%, #ffffff22, transparent 55%),
-    linear-gradient(160deg, var(--ad-primary-800), var(--ad-primary-900));
-  transition:
-    transform 0.4s cubic-bezier(0.34, 1.56, 0.5, 1),
-    box-shadow 0.4s,
-    filter 0.4s;
-}
-.ad-avatar[data-ad-size="xs"] {
-  --ad-avatar: 1.75rem;
-}
-.ad-avatar[data-ad-size="sm"] {
-  --ad-avatar: 2.25rem;
-}
-.ad-avatar[data-ad-size="lg"] {
-  --ad-avatar: 4rem;
-}
-/* Turning ring of light around the face. */
-.ad-avatar::before {
-  content: "";
-  position: absolute;
-  z-index: -1;
-  inset: -0.125rem;
-  border-radius: 50%;
-  background: conic-gradient(
-    from 0deg,
-    var(--ad-primary),
-    var(--ad-secondary-100),
-    var(--ad-primary),
-    rgb(from var(--ad-primary) r g b / 0) 60%,
-    var(--ad-primary)
-  );
-  mask: radial-gradient(
-    closest-side,
-    transparent calc(100% - 0.125rem),
-    #000 calc(100% - 0.1rem)
-  );
-  animation: ad-avatar-ring 6s linear infinite;
-}
-.ad-avatar:hover {
-  transform: translateY(-0.15rem) scale(1.06);
-  box-shadow: 0 0.6rem 1.2rem rgb(from var(--ad-primary) r g b / 0.27);
-}
-.ad-avatar:hover::before {
-  animation-duration: 1.6s;
-}
-@keyframes ad-avatar-ring {
-  to {
-    rotate: 1turn;
-  }
-}
-/* Host variant: the neon seal replaces the face and its ring; it lifts and glows brighter on hover. */
-/* The seal carries a label, so it starts larger than the initials at every size. */
-.ad-avatar[data-variant="host"] {
-  --ad-avatar: 5.5rem;
-  background: none;
-  text-shadow: none;
-}
-.ad-avatar[data-variant="host"][data-ad-size="xs"] {
-  --ad-avatar: 3rem;
-}
-.ad-avatar[data-variant="host"][data-ad-size="sm"] {
-  --ad-avatar: 4.25rem;
-}
-.ad-avatar[data-variant="host"][data-ad-size="lg"] {
-  --ad-avatar: 8rem;
-}
-.ad-avatar[data-variant="host"]::before {
-  content: none;
-}
-.ad-avatar[data-variant="host"]:hover {
-  box-shadow: none;
-  filter: brightness(1.18) drop-shadow(0 0 0.6rem rgb(from var(--ad-primary) r g b / 0.4));
-}
-.ad-host-seal {
-  position: relative;
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-/* The seal is a stack of drawings in paint order: the static ones are painted once, and each
-   ring is a layer of its own that only turns (around the ring's centre, 65 of 128). */
-.ad-host-seal > svg {
-  position: absolute;
-  inset: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-}
+/* Styles owned by Avatar: a slowly turning neon ring; it speeds up and the face lifts on hover. */
+.ad-avatar {
+  --ad-avatar: 3rem;
+  position: relative;
+  isolation: isolate;
+  width: var(--ad-avatar);
+  height: var(--ad-avatar);
+  display: grid;
+  place-items: center;
+  flex: none;
+  border-radius: 50%;
+  font-size: calc(var(--ad-avatar) * 0.42);
+  font-weight: 700;
+  color: #fff;
+  text-shadow: 0 0 0.5em var(--ad-primary);
+  background:
+    radial-gradient(circle at 35% 25%, #ffffff22, transparent 55%),
+    linear-gradient(160deg, var(--ad-primary-800), var(--ad-primary-900));
+  transition:
+    transform 0.4s cubic-bezier(0.34, 1.56, 0.5, 1),
+    box-shadow 0.4s,
+    filter 0.4s;
+}
+.ad-avatar[data-ad-size="xs"] {
+  --ad-avatar: 1.75rem;
+}
+.ad-avatar[data-ad-size="sm"] {
+  --ad-avatar: 2.25rem;
+}
+.ad-avatar[data-ad-size="lg"] {
+  --ad-avatar: 4rem;
+}
+/* Turning ring of light around the face. */
+.ad-avatar::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  inset: -0.125rem;
+  border-radius: 50%;
+  background: conic-gradient(
+    from 0deg,
+    var(--ad-primary),
+    var(--ad-secondary-100),
+    var(--ad-primary),
+    rgb(from var(--ad-primary) r g b / 0) 60%,
+    var(--ad-primary)
+  );
+  mask: radial-gradient(
+    closest-side,
+    transparent calc(100% - 0.125rem),
+    #000 calc(100% - 0.1rem)
+  );
+  animation: ad-avatar-ring 6s linear infinite;
+}
+.ad-avatar:hover {
+  transform: translateY(-0.15rem) scale(1.06);
+  box-shadow: 0 0.6rem 1.2rem rgb(from var(--ad-primary) r g b / 0.27);
+}
+.ad-avatar:hover::before {
+  animation-duration: 1.6s;
+}
+@keyframes ad-avatar-ring {
+  to {
+    rotate: 1turn;
+  }
+}
+/* Host variant: the neon seal replaces the face and its ring; it lifts and glows brighter on hover. */
+/* The seal carries a label, so it starts larger than the initials at every size. */
+.ad-avatar[data-variant="host"] {
+  --ad-avatar: 5.5rem;
+  background: none;
+  text-shadow: none;
+}
+.ad-avatar[data-variant="host"][data-ad-size="xs"] {
+  --ad-avatar: 3rem;
+}
+.ad-avatar[data-variant="host"][data-ad-size="sm"] {
+  --ad-avatar: 4.25rem;
+}
+.ad-avatar[data-variant="host"][data-ad-size="lg"] {
+  --ad-avatar: 8rem;
+}
+.ad-avatar[data-variant="host"]::before {
+  content: none;
+}
+.ad-avatar[data-variant="host"]:hover {
+  box-shadow: none;
+  filter: brightness(1.18) drop-shadow(0 0 0.6rem rgb(from var(--ad-primary) r g b / 0.4));
+}
+.ad-host-seal {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+/* The seal is a stack of drawings in paint order: the static ones are painted once, and each
+   ring is a layer of its own that only turns (around the ring's centre, 65 of 128). */
+.ad-host-seal > svg {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
 .ad-host-seal > svg[data-host-spin] {
   transform-origin: 50.78125% 50.78125%;
   will-change: transform;
@@ -118,49 +118,49 @@
     animation: none;
   }
 }
-/* A photo fills the face; inside the host seal it takes the crown's place. */
-.ad-avatar-photo {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  object-fit: cover;
-}
-/* The tag sits on the ring's lower edge like a name plate. */
-.ad-avatar-badge {
-  position: absolute;
-  bottom: -0.35em;
-  left: 50%;
-  translate: -50% 0;
-  padding: 0.15em 0.6em;
-  border: 0.0625rem solid rgb(from var(--ad-secondary) r g b / 0.6);
-  border-radius: 999px;
-  background: var(--ad-neutral-950);
-  color: var(--ad-secondary-100);
-  font-size: max(0.5625rem, calc(var(--ad-avatar) * 0.12));
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  line-height: 1.3;
-  text-shadow: none;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-/* Presence: a lit dot on the lower right of the ring. */
-.ad-avatar-presence {
-  position: absolute;
-  right: 4%;
-  bottom: 4%;
-  width: max(0.55rem, calc(var(--ad-avatar) * 0.24));
-  aspect-ratio: 1;
-  border: 0.125rem solid var(--ad-neutral-950);
-  border-radius: 50%;
-  background: var(--ad-success);
-  box-shadow: 0 0 0.4rem var(--ad-success);
-}
-.ad-avatar-presence[data-presence="busy"] {
-  background: var(--ad-primary);
-  box-shadow: 0 0 0.4rem var(--ad-primary);
-}
-.ad-avatar-presence[data-presence="offline"] {
-  background: var(--ad-neutral-600, #555);
-  box-shadow: none;
-}
+/* A photo fills the face; inside the host seal it takes the crown's place. */
+.ad-avatar-photo {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+/* The tag sits on the ring's lower edge like a name plate. */
+.ad-avatar-badge {
+  position: absolute;
+  bottom: -0.35em;
+  left: 50%;
+  translate: -50% 0;
+  padding: 0.15em 0.6em;
+  border: 0.0625rem solid rgb(from var(--ad-secondary) r g b / 0.6);
+  border-radius: 999px;
+  background: var(--ad-neutral-950);
+  color: var(--ad-secondary-100);
+  font-size: max(0.5625rem, calc(var(--ad-avatar) * 0.12));
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  line-height: 1.3;
+  text-shadow: none;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+/* Presence: a lit dot on the lower right of the ring. */
+.ad-avatar-presence {
+  position: absolute;
+  right: 4%;
+  bottom: 4%;
+  width: max(0.55rem, calc(var(--ad-avatar) * 0.24));
+  aspect-ratio: 1;
+  border: 0.125rem solid var(--ad-neutral-950);
+  border-radius: 50%;
+  background: var(--ad-success);
+  box-shadow: 0 0 0.4rem var(--ad-success);
+}
+.ad-avatar-presence[data-presence="busy"] {
+  background: var(--ad-primary);
+  box-shadow: 0 0 0.4rem var(--ad-primary);
+}
+.ad-avatar-presence[data-presence="offline"] {
+  background: var(--ad-neutral-600, #555);
+  box-shadow: none;
+}

package/dist/components/layout/Card/styles.css

@@ -1,37 +1,37 @@
-.ad-card {
-  min-width: 0;
-  position: relative;
-}
-.ad-card[data-ad-padding="none"] {
-  padding: 0;
-}
-.ad-card[data-ad-padding="sm"] {
-  padding: var(--ad-space-2);
-}
-.ad-card[data-ad-padding="md"] {
-  padding: var(--ad-space-4);
-}
-.ad-card[data-ad-padding="lg"] {
-  padding: var(--ad-space-6);
-}
-.ad-card > .ad-header {
-  margin-bottom: var(--ad-space-3);
-}
-/* Pointer spotlight: a soft ruby light under the cursor, faded in on hover. */
-.ad-card::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background: radial-gradient(
-    22rem circle at var(--ad-spot-x, 50%) var(--ad-spot-y, 0%),
-    rgb(from var(--ad-primary) r g b / 0.08),
-    transparent 60%
-  );
-  opacity: 0;
-  transition: opacity 0.35s;
-  pointer-events: none;
-}
-.ad-card:hover::after {
-  opacity: 1;
-}
+.ad-card {
+  min-width: 0;
+  position: relative;
+}
+.ad-card[data-ad-padding="none"] {
+  padding: 0;
+}
+.ad-card[data-ad-padding="sm"] {
+  padding: var(--ad-space-2);
+}
+.ad-card[data-ad-padding="md"] {
+  padding: var(--ad-space-4);
+}
+.ad-card[data-ad-padding="lg"] {
+  padding: var(--ad-space-6);
+}
+.ad-card > .ad-header {
+  margin-bottom: var(--ad-space-3);
+}
+/* Pointer spotlight: a soft ruby light under the cursor, faded in on hover. */
+.ad-card::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: radial-gradient(
+    22rem circle at var(--ad-spot-x, 50%) var(--ad-spot-y, 0%),
+    rgb(from var(--ad-primary) r g b / 0.08),
+    transparent 60%
+  );
+  opacity: 0;
+  transition: opacity 0.35s;
+  pointer-events: none;
+}
+.ad-card:hover::after {
+  opacity: 1;
+}

package/dist/components/layout/DialogActions/styles.css

@@ -1,31 +1,31 @@
-/* Styles owned by DialogActions. */
-.ad-dialog-actions {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 0.625rem;
-  align-items: center;
-}
-.ad-dialog-actions > .ad-button {
-  height: auto;
-  min-height: var(--ad-size-h);
-  padding-block: 0.6rem;
-}
-.ad-dialog-actions .ad-button-label {
-  white-space: normal;
-  overflow-wrap: anywhere;
-}
-/* Actions arrive last, one after another. */
-.ad-dialog[open] .ad-dialog-actions > * {
-  animation: ad-dialog-action 0.45s cubic-bezier(0.34, 1.4, 0.5, 1) both;
-  animation-delay: 0.22s;
-}
-.ad-dialog[open] .ad-dialog-actions > :nth-child(2) {
-  animation-delay: 0.3s;
-}
-@keyframes ad-dialog-action {
-  from {
-    opacity: 0;
-    transform: translateY(0.6rem) scale(0.95);
-  }
-}
+/* Styles owned by DialogActions. */
+.ad-dialog-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.625rem;
+  align-items: center;
+}
+.ad-dialog-actions > .ad-button {
+  height: auto;
+  min-height: var(--ad-size-h);
+  padding-block: 0.6rem;
+}
+.ad-dialog-actions .ad-button-label {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+/* Actions arrive last, one after another. */
+.ad-dialog[open] .ad-dialog-actions > * {
+  animation: ad-dialog-action 0.45s cubic-bezier(0.34, 1.4, 0.5, 1) both;
+  animation-delay: 0.22s;
+}
+.ad-dialog[open] .ad-dialog-actions > :nth-child(2) {
+  animation-delay: 0.3s;
+}
+@keyframes ad-dialog-action {
+  from {
+    opacity: 0;
+    transform: translateY(0.6rem) scale(0.95);
+  }
+}

package/dist/components/layout/DialogBody/styles.css

@@ -1,4 +1,4 @@
-/* Styles owned by DialogBody. */
+/* Styles owned by DialogBody. */
 .ad-dialog-body {
   min-height: 0;
   max-height: calc(100dvh - 10rem);
@@ -10,19 +10,19 @@
   padding: 1.125rem 0;
   padding-inline-end: var(--ad-space-2);
 }
-.ad-dialog-body p {
-  font-size: 0.875rem;
-  line-height: 1.65;
-  color: var(--ad-muted);
-  margin: 0 0 0.875rem;
-}
-/* Inside an opening dialog the body fades in right after the window. */
-.ad-dialog[open] .ad-dialog-body {
-  animation: ad-dialog-part 0.45s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both;
-}
-@keyframes ad-dialog-part {
-  from {
-    opacity: 0;
-    transform: translateY(0.5rem);
-  }
-}
+.ad-dialog-body p {
+  font-size: 0.875rem;
+  line-height: 1.65;
+  color: var(--ad-muted);
+  margin: 0 0 0.875rem;
+}
+/* Inside an opening dialog the body fades in right after the window. */
+.ad-dialog[open] .ad-dialog-body {
+  animation: ad-dialog-part 0.45s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+@keyframes ad-dialog-part {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+}