@neo-ui-kit/react 1.3.15 → 1.3.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -65,7 +65,7 @@ import "@neo-ui-kit/react/styles.css";
|
|
|
65
65
|
To test repository changes before publishing, run `npm run package` from the repository root and install the resulting archive in a separate application:
|
|
66
66
|
|
|
67
67
|
```bash
|
|
68
|
-
npm install /path/to/adui/release/neo-ui-kit-react-1.3.
|
|
68
|
+
npm install /path/to/adui/release/neo-ui-kit-react-1.3.16.tgz
|
|
69
69
|
```
|
|
70
70
|
|
|
71
71
|
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-пакет).
|
|
@@ -19,9 +19,18 @@ html:has(.ad-dialog[open]) {
|
|
|
19
19
|
}
|
|
20
20
|
/* Pointer light: a soft glow under the cursor, painted over the window's own surface. */
|
|
21
21
|
.ad.ad-dialog[data-ad-material] {
|
|
22
|
-
background:
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
background: var(--ad-surface-dialog);
|
|
23
|
+
}
|
|
24
|
+
.ad-dialog-spotlight {
|
|
25
|
+
position: absolute;
|
|
26
|
+
left: -26rem;
|
|
27
|
+
top: -26rem;
|
|
28
|
+
width: 52rem;
|
|
29
|
+
height: 52rem;
|
|
30
|
+
z-index: -2;
|
|
31
|
+
pointer-events: none;
|
|
32
|
+
background: radial-gradient(26rem circle, rgb(from var(--ad-primary) r g b / 0.11), transparent 60%);
|
|
33
|
+
transform: translate3d(var(--ad-spot-x, -40rem), var(--ad-spot-y, -40rem), 0);
|
|
25
34
|
}
|
|
26
35
|
.ad-dialog > .ad-header {
|
|
27
36
|
flex-wrap: nowrap;
|
|
@@ -18,23 +18,31 @@
|
|
|
18
18
|
margin-bottom: var(--ad-space-3);
|
|
19
19
|
}
|
|
20
20
|
/* Pointer spotlight: a soft ruby light under the cursor, faded in on hover. */
|
|
21
|
-
.ad-card
|
|
22
|
-
|
|
21
|
+
.ad-card-light {
|
|
22
|
+
position: absolute;
|
|
23
|
+
inset: 0;
|
|
24
|
+
border-radius: inherit;
|
|
25
|
+
overflow: hidden;
|
|
26
|
+
opacity: 0;
|
|
27
|
+
transition: opacity 0.35s;
|
|
28
|
+
pointer-events: none;
|
|
29
|
+
}
|
|
30
|
+
.ad-card-light::before {
|
|
23
31
|
--ad-spot-x: inherit;
|
|
24
32
|
--ad-spot-y: inherit;
|
|
25
33
|
content: "";
|
|
26
34
|
position: absolute;
|
|
27
|
-
|
|
28
|
-
|
|
35
|
+
width: 44rem;
|
|
36
|
+
height: 44rem;
|
|
37
|
+
left: var(--ad-spot-x, 50%);
|
|
38
|
+
top: var(--ad-spot-y, 0%);
|
|
39
|
+
transform: translate3d(-50%, -50%, 0);
|
|
29
40
|
background: radial-gradient(
|
|
30
|
-
22rem circle
|
|
41
|
+
22rem circle,
|
|
31
42
|
rgb(from var(--ad-primary) r g b / 0.08),
|
|
32
43
|
transparent 60%
|
|
33
44
|
);
|
|
34
|
-
opacity: 0;
|
|
35
|
-
transition: opacity 0.35s;
|
|
36
|
-
pointer-events: none;
|
|
37
45
|
}
|
|
38
|
-
.ad-card:hover
|
|
46
|
+
.ad-card:hover > .ad-card-light {
|
|
39
47
|
opacity: 1;
|
|
40
48
|
}
|
package/dist/index.js
CHANGED
|
@@ -315,6 +315,7 @@ var Card = ({
|
|
|
315
315
|
...p
|
|
316
316
|
}) => {
|
|
317
317
|
const ref = useRef(null);
|
|
318
|
+
const spotlight = useRef(null);
|
|
318
319
|
useBorder(ref, border, shell);
|
|
319
320
|
usePauseOffscreen(ref);
|
|
320
321
|
return createElement3(
|
|
@@ -330,12 +331,14 @@ var Card = ({
|
|
|
330
331
|
"data-ad-padding": padding,
|
|
331
332
|
// A soft light follows the pointer across the surface.
|
|
332
333
|
onPointerMove: (event) => {
|
|
334
|
+
const style = spotlight.current?.style;
|
|
335
|
+
if (!style) return;
|
|
333
336
|
const box = event.currentTarget.getBoundingClientRect();
|
|
334
|
-
|
|
337
|
+
style.setProperty(
|
|
335
338
|
"--ad-spot-x",
|
|
336
339
|
`${event.clientX - box.left}px`
|
|
337
340
|
);
|
|
338
|
-
|
|
341
|
+
style.setProperty(
|
|
339
342
|
"--ad-spot-y",
|
|
340
343
|
`${event.clientY - box.top}px`
|
|
341
344
|
);
|
|
@@ -353,7 +356,8 @@ var Card = ({
|
|
|
353
356
|
compact: level > 2
|
|
354
357
|
}
|
|
355
358
|
),
|
|
356
|
-
children
|
|
359
|
+
children,
|
|
360
|
+
createElement3("span", { ref: spotlight, className: "ad-card-light", "aria-hidden": true })
|
|
357
361
|
);
|
|
358
362
|
};
|
|
359
363
|
|
|
@@ -2865,7 +2869,7 @@ var Dialog = (p) => {
|
|
|
2865
2869
|
p.defaultOpen ?? false,
|
|
2866
2870
|
p.onOpenChange
|
|
2867
2871
|
), [pending, setPending] = useState5(false), [error, setError] = useState5();
|
|
2868
|
-
const ref = useRef10(null), confirmation = useRef10(0), confirming = useRef10(false), pressedOutside = useRef10(false), titleId = useId(), descId = useId();
|
|
2872
|
+
const ref = useRef10(null), spotlight = useRef10(null), confirmation = useRef10(0), confirming = useRef10(false), pressedOutside = useRef10(false), titleId = useId(), descId = useId();
|
|
2869
2873
|
useLayoutEffect2(() => {
|
|
2870
2874
|
confirming.current = false;
|
|
2871
2875
|
setPending(false);
|
|
@@ -2911,13 +2915,15 @@ var Dialog = (p) => {
|
|
|
2911
2915
|
pressedOutside.current = false;
|
|
2912
2916
|
},
|
|
2913
2917
|
onPointerMove: (e) => {
|
|
2918
|
+
const style = spotlight.current?.style;
|
|
2919
|
+
if (!style) return;
|
|
2914
2920
|
const box = e.currentTarget.getBoundingClientRect();
|
|
2915
|
-
|
|
2916
|
-
|
|
2921
|
+
style.setProperty("--ad-spot-x", `${e.clientX - box.left}px`);
|
|
2922
|
+
style.setProperty("--ad-spot-y", `${e.clientY - box.top}px`);
|
|
2917
2923
|
},
|
|
2918
|
-
onPointerLeave: (
|
|
2919
|
-
|
|
2920
|
-
|
|
2924
|
+
onPointerLeave: () => {
|
|
2925
|
+
spotlight.current?.style.removeProperty("--ad-spot-x");
|
|
2926
|
+
spotlight.current?.style.removeProperty("--ad-spot-y");
|
|
2921
2927
|
},
|
|
2922
2928
|
"aria-describedby": p.description ? descId : void 0,
|
|
2923
2929
|
onCancel: (e) => {
|
|
@@ -2925,6 +2931,7 @@ var Dialog = (p) => {
|
|
|
2925
2931
|
if (!pending) setOpen(false);
|
|
2926
2932
|
},
|
|
2927
2933
|
children: [
|
|
2934
|
+
/* @__PURE__ */ jsx23("span", { ref: spotlight, className: "ad-dialog-spotlight", "aria-hidden": "true" }),
|
|
2928
2935
|
p.art && /* @__PURE__ */ jsx23("div", { className: "ad-dialog-art", "aria-hidden": "true", children: p.art }),
|
|
2929
2936
|
/* @__PURE__ */ jsx23(
|
|
2930
2937
|
Header,
|