@neo-ui-kit/react 1.3.15 → 1.3.17

package/README.md

@@ -65,7 +65,7 @@ import "@neo-ui-kit/react/styles.css";
 To test repository changes before publishing, run `npm run package` from the repository root and install the resulting archive in a separate application:
 
 ```bash
-npm install /path/to/adui/release/neo-ui-kit-react-1.3.15.tgz
+npm install /path/to/adui/release/neo-ui-kit-react-1.3.17.tgz
 ```
 
 Maintainers publish new versions from `Pro100Dimka/adui` using the `release.yml` GitHub Actions workflow, a matching `v<version>` tag, and the `npm-publication` environment. npm trusts its OIDC identity; no `NPM_TOKEN` is required. The workflow checks the project and packed consumer before publishing the tested archive. Published `1.0.0` cannot be overwritten: code and README changes in npm require a new package version. See the [repository release instructions](https://github.com/Pro100Dimka/adui#npm-пакет).

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

@@ -19,9 +19,18 @@ html:has(.ad-dialog[open]) {
 }
 /* Pointer light: a soft glow under the cursor, painted over the window's own surface. */
 .ad.ad-dialog[data-ad-material] {
-  background:
-    radial-gradient(26rem circle at var(--ad-spot-x, -40rem) var(--ad-spot-y, -40rem), rgb(from var(--ad-primary) r g b / 0.11), transparent 60%),
-    var(--ad-surface-dialog);
+  background: var(--ad-surface-dialog);
+}
+.ad-dialog-spotlight {
+  position: absolute;
+  left: -26rem;
+  top: -26rem;
+  width: 52rem;
+  height: 52rem;
+  z-index: -2;
+  pointer-events: none;
+  background: radial-gradient(26rem circle, rgb(from var(--ad-primary) r g b / 0.11), transparent 60%);
+  transform: translate3d(var(--ad-spot-x, -40rem), var(--ad-spot-y, -40rem), 0);
 }
 .ad-dialog > .ad-header {
   flex-wrap: nowrap;

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

@@ -18,23 +18,33 @@
   margin-bottom: var(--ad-space-3);
 }
 /* Pointer spotlight: a soft ruby light under the cursor, faded in on hover. */
-.ad-card::after {
-  /* The pointer position is not inherited by default: the light reads it from its own card. */
-  --ad-spot-x: inherit;
-  --ad-spot-y: inherit;
-  content: "";
+.ad-card-light {
   position: absolute;
   inset: 0;
   border-radius: inherit;
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity 0.35s;
+  pointer-events: none;
+}
+.ad-card-spotlight {
+  position: absolute;
+  inset: 0;
+  transform: translate3d(var(--ad-spot-x, 50%), var(--ad-spot-y, 0%), 0);
+}
+.ad-card-spotlight::before {
+  content: "";
+  position: absolute;
+  width: 44rem;
+  height: 44rem;
+  left: -22rem;
+  top: -22rem;
   background: radial-gradient(
-    22rem circle at var(--ad-spot-x, 50%) var(--ad-spot-y, 0%),
+    22rem circle,
     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 {
+.ad-card:hover > .ad-card-light {
   opacity: 1;
 }

package/dist/index.js

@@ -315,6 +315,7 @@ var Card = ({
   ...p
 }) => {
   const ref = useRef(null);
+  const spotlight = useRef(null);
   useBorder(ref, border, shell);
   usePauseOffscreen(ref);
   return createElement3(
@@ -330,12 +331,14 @@ var Card = ({
       "data-ad-padding": padding,
       // A soft light follows the pointer across the surface.
       onPointerMove: (event) => {
+        const style = spotlight.current?.style;
+        if (!style) return;
         const box = event.currentTarget.getBoundingClientRect();
-        event.currentTarget.style.setProperty(
+        style.setProperty(
           "--ad-spot-x",
           `${event.clientX - box.left}px`
         );
-        event.currentTarget.style.setProperty(
+        style.setProperty(
           "--ad-spot-y",
           `${event.clientY - box.top}px`
         );
@@ -353,7 +356,12 @@ var Card = ({
         compact: level > 2
       }
     ),
-    children
+    children,
+    createElement3(
+      "span",
+      { className: "ad-card-light", "aria-hidden": true },
+      createElement3("span", { ref: spotlight, className: "ad-card-spotlight" })
+    )
   );
 };
 
@@ -2865,7 +2873,7 @@ var Dialog = (p) => {
     p.defaultOpen ?? false,
     p.onOpenChange
   ), [pending, setPending] = useState5(false), [error, setError] = useState5();
-  const ref = useRef10(null), confirmation = useRef10(0), confirming = useRef10(false), pressedOutside = useRef10(false), titleId = useId(), descId = useId();
+  const ref = useRef10(null), spotlight = useRef10(null), confirmation = useRef10(0), confirming = useRef10(false), pressedOutside = useRef10(false), titleId = useId(), descId = useId();
   useLayoutEffect2(() => {
     confirming.current = false;
     setPending(false);
@@ -2911,13 +2919,15 @@ var Dialog = (p) => {
         pressedOutside.current = false;
       },
       onPointerMove: (e) => {
+        const style = spotlight.current?.style;
+        if (!style) return;
         const box = e.currentTarget.getBoundingClientRect();
-        e.currentTarget.style.setProperty("--ad-spot-x", `${e.clientX - box.left}px`);
-        e.currentTarget.style.setProperty("--ad-spot-y", `${e.clientY - box.top}px`);
+        style.setProperty("--ad-spot-x", `${e.clientX - box.left}px`);
+        style.setProperty("--ad-spot-y", `${e.clientY - box.top}px`);
       },
-      onPointerLeave: (e) => {
-        e.currentTarget.style.removeProperty("--ad-spot-x");
-        e.currentTarget.style.removeProperty("--ad-spot-y");
+      onPointerLeave: () => {
+        spotlight.current?.style.removeProperty("--ad-spot-x");
+        spotlight.current?.style.removeProperty("--ad-spot-y");
       },
       "aria-describedby": p.description ? descId : void 0,
       onCancel: (e) => {
@@ -2925,6 +2935,7 @@ var Dialog = (p) => {
         if (!pending) setOpen(false);
       },
       children: [
+        /* @__PURE__ */ jsx23("span", { ref: spotlight, className: "ad-dialog-spotlight", "aria-hidden": "true" }),
         p.art && /* @__PURE__ */ jsx23("div", { className: "ad-dialog-art", "aria-hidden": "true", children: p.art }),
         /* @__PURE__ */ jsx23(
           Header,

package/package.json

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