@neo-ui-kit/react 1.0.0 → 1.0.1

package/dist/theme/base.css

@@ -1,114 +1,114 @@
-/* Truly global component plumbing. */
-/* Shared component rules: dimensions belong to the layout, materials to tokens. */
-.ad,
-.ad *,
-[data-ad-reference],
-[data-ad-reference] * {
-  box-sizing: border-box;
-}
-[data-ad-material="ghost"] {
-  --ad-material-bg: transparent;
-  --ad-material-shadow: none;
-}
-[data-ad-material="danger"] {
-  --ad-material-bg: linear-gradient(135deg, var(--ad-primary-700), var(--ad-primary-800));
-  --ad-material-shadow:
-    inset 0 0.0625rem 0.0625rem rgb(from var(--ad-secondary-200) r g b / 0.3), 0 0 0.875rem rgb(from var(--ad-primary) r g b / 0.19);
-}
-.ad[data-ad-material],
-[data-ad-reference][data-ad-material][data-ad-component] {
-  background: var(--ad-material-bg);
-  box-shadow: var(--ad-material-shadow);
-}
-.ad[data-ad-material] {
-  border: 0.0625rem solid transparent;
-}
-:where(.ad) button,
-:where(.ad) input,
-:where(.ad) select,
-button:where(.ad),
-input:where(.ad),
-select:where(.ad) {
-  font-family: var(--ad-font-family-sans);
-  color: inherit;
-}
-button.ad {
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-}
-button.ad:disabled {
-  cursor: default;
-  opacity: 0.4;
-}
-.ad button:focus-visible,
-.ad input:focus-visible,
-.ad select:focus-visible,
-.ad[tabindex]:focus-visible,
-button.ad:focus-visible {
-  outline: 0.125rem solid var(--ad-focus);
-  outline-offset: 0.1875rem;
-}
-[data-ad-tone="success"] {
-  --ad-tone: var(--ad-success);
-}
-[data-ad-tone="error"] {
-  --ad-tone: var(--ad-primary);
-}
-[data-ad-tone="warning"] {
-  --ad-tone: var(--ad-warning);
-}
-[data-ad-tone="pending"],
-[data-ad-tone="offline"] {
-  --ad-tone: var(--ad-neutral-400);
-}
-[data-ad-tone="processing"] {
-  --ad-tone: var(--ad-secondary);
-}
-[data-ad-tone="info"] {
-  --ad-tone: var(--ad-info);
-}
-.ad-empty-state > .ad-icon {
-  color: var(--ad-secondary);
-  filter: drop-shadow(0 0 0.5625rem rgb(from var(--ad-primary) r g b / 0.33));
-}
-.ad-menu .ad-divider {
-  margin: 0.3125rem 0;
-}
-.ad-border {
-  position: absolute;
-  inset: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  max-width: none;
-  max-height: none;
-  overflow: visible;
-  /* Decorative overflow can paint outside the host without enlarging its scroll area. */
-  contain: layout;
-  pointer-events: none;
-  user-select: none;
-  z-index: 20;
-}
-.ad-border > svg {
-  position: absolute;
-  inset: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-}
-/* The rings: still masks around the edge (with room for the halo), lit by spots that move. */
-.ad-border-aura,
-.ad-border-core {
-  position: absolute;
-  inset: -16px;
-  /* The mask hides paint, but only clipping keeps moving lights out of scroll geometry. */
-  overflow: clip;
-  mask-size: 100% 100%;
-  mask-repeat: no-repeat;
-  -webkit-mask-size: 100% 100%;
-  -webkit-mask-repeat: no-repeat;
-}
+/* Truly global component plumbing. */
+/* Shared component rules: dimensions belong to the layout, materials to tokens. */
+.ad,
+.ad *,
+[data-ad-reference],
+[data-ad-reference] * {
+  box-sizing: border-box;
+}
+[data-ad-material="ghost"] {
+  --ad-material-bg: transparent;
+  --ad-material-shadow: none;
+}
+[data-ad-material="danger"] {
+  --ad-material-bg: linear-gradient(135deg, var(--ad-primary-700), var(--ad-primary-800));
+  --ad-material-shadow:
+    inset 0 0.0625rem 0.0625rem rgb(from var(--ad-secondary-200) r g b / 0.3), 0 0 0.875rem rgb(from var(--ad-primary) r g b / 0.19);
+}
+.ad[data-ad-material],
+[data-ad-reference][data-ad-material][data-ad-component] {
+  background: var(--ad-material-bg);
+  box-shadow: var(--ad-material-shadow);
+}
+.ad[data-ad-material] {
+  border: 0.0625rem solid transparent;
+}
+:where(.ad) button,
+:where(.ad) input,
+:where(.ad) select,
+button:where(.ad),
+input:where(.ad),
+select:where(.ad) {
+  font-family: var(--ad-font-family-sans);
+  color: inherit;
+}
+button.ad {
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+button.ad:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+.ad button:focus-visible,
+.ad input:focus-visible,
+.ad select:focus-visible,
+.ad[tabindex]:focus-visible,
+button.ad:focus-visible {
+  outline: 0.125rem solid var(--ad-focus);
+  outline-offset: 0.1875rem;
+}
+[data-ad-tone="success"] {
+  --ad-tone: var(--ad-success);
+}
+[data-ad-tone="error"] {
+  --ad-tone: var(--ad-primary);
+}
+[data-ad-tone="warning"] {
+  --ad-tone: var(--ad-warning);
+}
+[data-ad-tone="pending"],
+[data-ad-tone="offline"] {
+  --ad-tone: var(--ad-neutral-400);
+}
+[data-ad-tone="processing"] {
+  --ad-tone: var(--ad-secondary);
+}
+[data-ad-tone="info"] {
+  --ad-tone: var(--ad-info);
+}
+.ad-empty-state > .ad-icon {
+  color: var(--ad-secondary);
+  filter: drop-shadow(0 0 0.5625rem rgb(from var(--ad-primary) r g b / 0.33));
+}
+.ad-menu .ad-divider {
+  margin: 0.3125rem 0;
+}
+.ad-border {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  overflow: visible;
+  /* Decorative overflow can paint outside the host without enlarging its scroll area. */
+  contain: layout;
+  pointer-events: none;
+  user-select: none;
+  z-index: 20;
+}
+.ad-border > svg {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+/* The rings: still masks around the edge (with room for the halo), lit by spots that move. */
+.ad-border-aura,
+.ad-border-core {
+  position: absolute;
+  inset: -16px;
+  /* The mask hides paint, but only clipping keeps moving lights out of scroll geometry. */
+  overflow: clip;
+  mask-size: 100% 100%;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+}
 .ad-border-light {
   position: absolute;
   top: 0;
@@ -120,102 +120,102 @@ button.ad:focus-visible {
 [data-ad-motion="off"] .ad-border-light {
   will-change: auto;
 }
-[data-ad-color-scheme="light"] .ad-border .ad-border-aura {
-  opacity: 0.4;
-}
-.ad-spinner {
-  width: 0.9375rem;
-  height: 0.9375rem;
-  border: 0.125rem solid rgb(from var(--ad-secondary) r g b / 0.2);
-  border-top-color: var(--ad-secondary-100);
-  border-radius: 50%;
-  animation: ad-spin 0.8s linear infinite;
-}
-@keyframes ad-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-/* Motion off: every animation jumps straight to its final frame, so entrances (dialogs, toasts,
-   popovers) still end visible, and nothing keeps looping. */
-:is([data-ad-motion="off"] .ad, [data-ad-motion="off"] .ad *),
-:is([data-ad-motion="off"] .ad, [data-ad-motion="off"] .ad *)::before,
-:is([data-ad-motion="off"] .ad, [data-ad-motion="off"] .ad *)::after,
-[data-ad-motion="off"] .ad-dialog::backdrop {
-  animation-duration: 0.01ms !important;
-  animation-delay: 0s !important;
-  animation-iteration-count: 1 !important;
-  transition-duration: 0.01ms !important;
-}
-@media (prefers-reduced-motion: reduce) {
-  :root:not([data-ad-motion="on"]) :is(.ad, .ad *),
-  :root:not([data-ad-motion="on"]) :is(.ad, .ad *)::before,
-  :root:not([data-ad-motion="on"]) :is(.ad, .ad *)::after,
-  :root:not([data-ad-motion="on"]) .ad-dialog::backdrop {
-    animation-duration: 0.01ms !important;
-    animation-delay: 0s !important;
-    animation-iteration-count: 1 !important;
-    transition: none !important;
-  }
-}
-/* Ring of light spread from the press point; hosts clip it with overflow: hidden. */
-.ad-ripple {
-  position: absolute;
-  z-index: 0;
-  width: 0.5rem;
-  height: 0.5rem;
-  margin: -0.25rem 0 0 -0.25rem;
-  border-radius: 50%;
-  border: 0.0625rem solid var(--ad-secondary-100);
-  background: radial-gradient(closest-side, rgb(from var(--ad-secondary) r g b / 0.2), transparent);
-  box-shadow: 0 0 0.75rem var(--ad-primary);
-  pointer-events: none;
-  animation: ad-ripple 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
-}
-@keyframes ad-ripple {
-  to {
-    scale: 18;
-    opacity: 0;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .ad-ripple {
-    display: none;
-  }
-}
-
-/* Scrollbars inside a themed area: a slim glowing thumb in the primary colour, no arrows, a quiet track.
-   (Setting scrollbar-color would switch Chromium to plain bars, so only the WebKit parts are styled.) */
-.ad-theme ::-webkit-scrollbar {
-  width: clamp(0.6rem, 0.7vw, 1rem);
-  height: clamp(0.6rem, 0.7vw, 1rem);
-}
-.ad-theme ::-webkit-scrollbar-track {
-  border-radius: var(--ad-radius-pill);
-  background: rgb(from var(--ad-neutral-950) r g b / 0.35);
-}
-.ad-theme ::-webkit-scrollbar-thumb {
-  border: 0.18rem solid transparent;
-  border-radius: var(--ad-radius-pill);
-  background: linear-gradient(180deg, var(--ad-secondary), var(--ad-primary)) padding-box;
-  box-shadow: 0 0 0.5rem rgb(from var(--ad-primary) r g b / 0.6);
-}
-.ad-theme ::-webkit-scrollbar-thumb:hover {
-  background: var(--ad-secondary) padding-box;
-}
-.ad-theme ::-webkit-scrollbar-button {
-  display: none;
-}
-.ad-theme ::-webkit-scrollbar-corner {
-  background: transparent;
-}
-
-/* Out of view (see usePauseOffscreen): every animation inside holds still until it scrolls back. */
-[data-ad-offscreen],
-[data-ad-offscreen]::before,
-[data-ad-offscreen]::after,
-[data-ad-offscreen] *,
-[data-ad-offscreen] *::before,
-[data-ad-offscreen] *::after {
-  animation-play-state: paused !important;
-}
+[data-ad-color-scheme="light"] .ad-border .ad-border-aura {
+  opacity: 0.4;
+}
+.ad-spinner {
+  width: 0.9375rem;
+  height: 0.9375rem;
+  border: 0.125rem solid rgb(from var(--ad-secondary) r g b / 0.2);
+  border-top-color: var(--ad-secondary-100);
+  border-radius: 50%;
+  animation: ad-spin 0.8s linear infinite;
+}
+@keyframes ad-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+/* Motion off: every animation jumps straight to its final frame, so entrances (dialogs, toasts,
+   popovers) still end visible, and nothing keeps looping. */
+:is([data-ad-motion="off"] .ad, [data-ad-motion="off"] .ad *),
+:is([data-ad-motion="off"] .ad, [data-ad-motion="off"] .ad *)::before,
+:is([data-ad-motion="off"] .ad, [data-ad-motion="off"] .ad *)::after,
+[data-ad-motion="off"] .ad-dialog::backdrop {
+  animation-duration: 0.01ms !important;
+  animation-delay: 0s !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.01ms !important;
+}
+@media (prefers-reduced-motion: reduce) {
+  :root:not([data-ad-motion="on"]) :is(.ad, .ad *),
+  :root:not([data-ad-motion="on"]) :is(.ad, .ad *)::before,
+  :root:not([data-ad-motion="on"]) :is(.ad, .ad *)::after,
+  :root:not([data-ad-motion="on"]) .ad-dialog::backdrop {
+    animation-duration: 0.01ms !important;
+    animation-delay: 0s !important;
+    animation-iteration-count: 1 !important;
+    transition: none !important;
+  }
+}
+/* Ring of light spread from the press point; hosts clip it with overflow: hidden. */
+.ad-ripple {
+  position: absolute;
+  z-index: 0;
+  width: 0.5rem;
+  height: 0.5rem;
+  margin: -0.25rem 0 0 -0.25rem;
+  border-radius: 50%;
+  border: 0.0625rem solid var(--ad-secondary-100);
+  background: radial-gradient(closest-side, rgb(from var(--ad-secondary) r g b / 0.2), transparent);
+  box-shadow: 0 0 0.75rem var(--ad-primary);
+  pointer-events: none;
+  animation: ad-ripple 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+}
+@keyframes ad-ripple {
+  to {
+    scale: 18;
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ad-ripple {
+    display: none;
+  }
+}
+
+/* Scrollbars inside a themed area: a slim glowing thumb in the primary colour, no arrows, a quiet track.
+   (Setting scrollbar-color would switch Chromium to plain bars, so only the WebKit parts are styled.) */
+.ad-theme ::-webkit-scrollbar {
+  width: clamp(0.6rem, 0.7vw, 1rem);
+  height: clamp(0.6rem, 0.7vw, 1rem);
+}
+.ad-theme ::-webkit-scrollbar-track {
+  border-radius: var(--ad-radius-pill);
+  background: rgb(from var(--ad-neutral-950) r g b / 0.35);
+}
+.ad-theme ::-webkit-scrollbar-thumb {
+  border: 0.18rem solid transparent;
+  border-radius: var(--ad-radius-pill);
+  background: linear-gradient(180deg, var(--ad-secondary), var(--ad-primary)) padding-box;
+  box-shadow: 0 0 0.5rem rgb(from var(--ad-primary) r g b / 0.6);
+}
+.ad-theme ::-webkit-scrollbar-thumb:hover {
+  background: var(--ad-secondary) padding-box;
+}
+.ad-theme ::-webkit-scrollbar-button {
+  display: none;
+}
+.ad-theme ::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* Out of view (see usePauseOffscreen): every animation inside holds still until it scrolls back. */
+[data-ad-offscreen],
+[data-ad-offscreen]::before,
+[data-ad-offscreen]::after,
+[data-ad-offscreen] *,
+[data-ad-offscreen] *::before,
+[data-ad-offscreen] *::after {
+  animation-play-state: paused !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo-ui-kit/react",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "NEO UI — React component library",
   "type": "module",
   "license": "MIT",