@vnejs/uis.react.cursor 0.1.3 → 0.1.5

package/dist/Cursor.d.ts

@@ -1,4 +1,3 @@
-import "./Cursor.styl";
 export declare const Cursor: ({ isShow, transition, size, forceX, forceY, srcDefault, srcPointer }: {
     isShow?: boolean;
     transition?: number;

package/dist/Cursor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Cursor.d.ts","sourceRoot":"","sources":["../src/Cursor.tsx"],"names":[],"mappings":"AAIA,OAAO,eAAe,CAAC;AAIvB,eAAO,MAAM,MAAM,GAAI;;;;;;;;CAAwF,4CAyC9G,CAAC"}
+{"version":3,"file":"Cursor.d.ts","sourceRoot":"","sources":["../src/Cursor.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,MAAM,GAAI;;;;;;;;CAAwF,4CAyC9G,CAAC"}

package/dist/Cursor.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { cn, getVneLength } from "@vnejs/uis.utils";
-import "./Cursor.styl";
-const b = cn("Cursor");
+import { getVneLength } from "@vnejs/uis.utils";
+import { b } from "./Cursor.styles.js";
 export const Cursor = ({ isShow = false, transition = 500, size = 120, forceX, forceY, srcDefault, srcPointer }) => {
     const cursorType = useMemo(() => {
         const elements = document.elementsFromPoint(forceX, forceY);

package/dist/Cursor.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cursor.js","sourceRoot":"","sources":["../src/Cursor.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEvB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,MAAM,GAAG,KAAK,EAAE,UAAU,GAAG,GAAG,EAAE,IAAI,GAAG,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,EAAE;IACjH,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,MAAM,QAAQ,GAAG,QAAQ,CAAC,iBAAiB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAE5D,CAAC,GAAG,QAAQ,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,mBAAmB,CAAC,CAAC,CAAC;QACnH,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC,CAAC;QAEvE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACzC,MAAM,GAAG,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;YAE9C,IAAI,GAAG,CAAC,YAAY,CAAC,iBAAiB,CAAC;gBAAE,OAAO,GAAG,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QACtF,CAAC;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAErB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,MAAM,GAAwB,EAAE,CAAC;QAEvC,IAAI,UAAU;YAAE,MAAM,CAAC,UAAU,GAAG,oBAAoB,UAAU,eAAe,UAAU,IAAI,CAAC;QAEhG,IAAI,IAAI,EAAE,CAAC;YACT,MAAM,CAAC,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;YAClC,MAAM,CAAC,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;QACrC,CAAC;QAED,MAAM,CAAC,kBAAkB,CAAC,GAAG,QAAQ,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC;QAC5F,MAAM,CAAC,kBAAkB,CAAC,GAAG,MAAM,CAAC;QACpC,MAAM,CAAC,mBAAmB,CAAC,GAAG,MAAM,CAAC;QAErC,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC;IAE3E,OAAO,CACL,cACE,SAAS,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,mCAExB,EAAE,EAAC,QAAQ,EACX,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Cursor.js","sourceRoot":"","sources":["../src/Cursor.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,CAAC,EAAE,MAAM,oBAAoB,CAAC;AAEvC,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,MAAM,GAAG,KAAK,EAAE,UAAU,GAAG,GAAG,EAAE,IAAI,GAAG,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,EAAE;IACjH,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,MAAM,QAAQ,GAAG,QAAQ,CAAC,iBAAiB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAE5D,CAAC,GAAG,QAAQ,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,mBAAmB,CAAC,CAAC,CAAC;QACnH,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC,CAAC;QAEvE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACzC,MAAM,GAAG,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;YAE9C,IAAI,GAAG,CAAC,YAAY,CAAC,iBAAiB,CAAC;gBAAE,OAAO,GAAG,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QACtF,CAAC;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAErB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,MAAM,GAAwB,EAAE,CAAC;QAEvC,IAAI,UAAU;YAAE,MAAM,CAAC,UAAU,GAAG,oBAAoB,UAAU,eAAe,UAAU,IAAI,CAAC;QAEhG,IAAI,IAAI,EAAE,CAAC;YACT,MAAM,CAAC,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;YAClC,MAAM,CAAC,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;QACrC,CAAC;QAED,MAAM,CAAC,kBAAkB,CAAC,GAAG,QAAQ,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC;QAC5F,MAAM,CAAC,kBAAkB,CAAC,GAAG,MAAM,CAAC;QACpC,MAAM,CAAC,mBAAmB,CAAC,GAAG,MAAM,CAAC;QAErC,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC;IAE3E,OAAO,CACL,cACE,SAAS,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,mCAExB,EAAE,EAAC,QAAQ,EACX,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC,CAAC"}

package/dist/Cursor.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const b: (...args: any[]) => string;
+//# sourceMappingURL=Cursor.styles.d.ts.map

package/dist/Cursor.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cursor.styles.d.ts","sourceRoot":"","sources":["../src/Cursor.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,CAAC,4BAAe,CAAC"}

package/dist/Cursor.styles.js

@@ -0,0 +1,23 @@
+import { cn, injectStyles, sel } from "@vnejs/uis.utils";
+export const b = cn("Cursor");
+const CSS = `
+${sel(b())} {
+  position: fixed;
+  translate: calc(-50% + 1px * var(--vne-cursor-left)) calc(-50% + 1px * var(--vne-cursor-top));
+  z-index: 999999999999999;
+  top: 0;
+  left: 0;
+  background-image: var(--vne-cursor-src);
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+  pointer-events: none;
+  opacity: 0;
+}
+
+${sel(b({ isShow: true }))} {
+  opacity: 1;
+}
+`;
+injectStyles(CSS);
+//# sourceMappingURL=Cursor.styles.js.map

package/dist/Cursor.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cursor.styles.js","sourceRoot":"","sources":["../src/Cursor.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC;AAE9B,MAAM,GAAG,GAAG;EACV,GAAG,CAAC,CAAC,EAAE,CAAC;;;;;;;;;;;;;;EAcR,GAAG,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;;;CAGzB,CAAC;AAEF,YAAY,CAAC,GAAG,CAAC,CAAC"}

package/package.json

@@ -1,31 +1,26 @@
 {
   "name": "@vnejs/uis.react.cursor",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "node ../../../scripts/build-package.mjs",
-    "publish:major:plugin": "npm run publish:major",
-    "publish:minor:plugin": "npm run publish:minor",
-    "publish:patch:plugin": "npm run publish:patch",
-    "publish:major": "npm run build && npm version major && npm publish --access public",
-    "publish:minor": "npm run build && npm version minor && npm publish --access public",
-    "publish:patch": "npm run build && npm version patch && npm publish --access public"
+    "build": "npx @vnejs/monorepo package",
+    "publish:major:uis:react": "npm run publish:major",
+    "publish:minor:uis:react": "npm run publish:minor",
+    "publish:patch:uis:react": "npm run publish:patch",
+    "publish:major": "npx @vnejs/monorepo publish major --access public",
+    "publish:minor": "npx @vnejs/monorepo publish minor --access public",
+    "publish:patch": "npx @vnejs/monorepo publish patch --access public"
   },
   "peerDependencies": {
-    "@bem-react/classname": "1.5.12",
-    "@vnejs/uis.utils": "~0.1.0",
-    "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "@vnejs/uis.utils": "~0.1.0"
   },
   "devDependencies": {
-    "@vnejs/uis.react": "~0.1.0",
-    "typescript": "^6.0.3",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4"
+    "@vnejs/uis.react": "~0.1.0"
   },
   "files": [
     "dist",
-    "package.json"
+    "src",
+    "tsconfig.json"
   ]
 }

package/src/Cursor.stories.tsx

@@ -0,0 +1,59 @@
+import { useState } from "react";
+
+import { renderWithVneWrap, VneWrap } from "@vnejs/uis.react";
+
+import { Button, Cursor, Flex, Range, Text } from "@vnejs/uis.react";
+
+export const Common = {
+  args: {
+    ...VneWrap.DEFAULT_ARGS,
+  },
+};
+
+export default {
+  title: "Primitives/Cursor",
+  render: renderWithVneWrap(
+    (args) => {
+      const [rangeValue, setRangeValue] = useState(0);
+
+      return (
+        <Flex
+          align={Flex.ALIGN.CENTER}
+          justify={Flex.JUSTIFY.CENTER}
+          direction={Flex.DIRECTION.COLUMN}
+          height={2160}
+          gap={48}
+        >
+          <Cursor
+            {...args}
+            srcDefault={"./cursor/default.svg"}
+            srcPointer={"./cursor/pointer.svg"}
+          />
+          <Button
+            text="12345"
+            padding={24}
+            textSize={60}
+          />
+          <Text
+            size={48}
+            text="1111111"
+            isHoverable={true}
+          />
+          <Range
+            width={360}
+            height={60}
+            min={0}
+            max={100}
+            step={1}
+            value={rangeValue}
+            onChange={(v) => setRangeValue(v)}
+          />
+        </Flex>
+      );
+    },
+    { hideCursor: true, hideFlex: true },
+  ),
+  argTypes: {
+    ...VneWrap.ARGS,
+  },
+};

package/src/Cursor.styles.ts

@@ -0,0 +1,25 @@
+import { cn, injectStyles, sel } from "@vnejs/uis.utils";
+
+export const b = cn("Cursor");
+
+const CSS = `
+${sel(b())} {
+  position: fixed;
+  translate: calc(-50% + 1px * var(--vne-cursor-left)) calc(-50% + 1px * var(--vne-cursor-top));
+  z-index: 999999999999999;
+  top: 0;
+  left: 0;
+  background-image: var(--vne-cursor-src);
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+  pointer-events: none;
+  opacity: 0;
+}
+
+${sel(b({ isShow: true }))} {
+  opacity: 1;
+}
+`;
+
+injectStyles(CSS);

package/src/Cursor.tsx

@@ -0,0 +1,48 @@
+import { useMemo } from "react";
+
+import { getVneLength } from "@vnejs/uis.utils";
+
+import { b } from "./Cursor.styles.js";
+
+export const Cursor = ({ isShow = false, transition = 500, size = 120, forceX, forceY, srcDefault, srcPointer }) => {
+  const cursorType = useMemo(() => {
+    const elements = document.elementsFromPoint(forceX, forceY);
+
+    [...document.querySelectorAll("[vne-cursor-target]")].forEach((elem) => elem.removeAttribute("vne-cursor-target"));
+    elements.forEach((elem) => elem.setAttribute("vne-cursor-target", ""));
+
+    for (let i = 0; i < elements.length; i++) {
+      const cur = elements[elements.length - i - 1];
+
+      if (cur.getAttribute("vne-cursor-type")) return cur.getAttribute("vne-cursor-type");
+    }
+
+    return "default";
+  }, [forceX, forceY]);
+
+  const style = useMemo(() => {
+    const result: Record<string, any> = {};
+
+    if (transition) result.transition = `background-image ${transition}ms, opacity ${transition}ms`;
+
+    if (size) {
+      result.width = getVneLength(size);
+      result.height = getVneLength(size);
+    }
+
+    result["--vne-cursor-src"] = `url('${cursorType === "pointer" ? srcPointer : srcDefault}')`;
+    result["--vne-cursor-top"] = forceY;
+    result["--vne-cursor-left"] = forceX;
+
+    return result;
+  }, [forceX, forceY, size, cursorType, srcPointer, srcDefault, transition]);
+
+  return (
+    <div
+      className={b({ isShow })}
+      data-html2canvas-ignore
+      id="cursor"
+      style={style}
+    />
+  );
+};

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./Cursor";

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../../tsconfig.react.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "../../../globals.d.ts",
+    "../../../peer-modules.d.ts"
+  ],
+  "exclude": [
+    "dist",
+    "node_modules",
+    "src/**/*.stories.tsx"
+  ]
+}

package/dist/Cursor.styl

@@ -1,19 +0,0 @@
-.Cursor
-    position: fixed
-    translate: calc(-50% + 1px * var(--vne-cursor-left)) calc(-50% + 1px * var(--vne-cursor-top))
-    z-index: 999999999999999
-    top: 0
-    left: 0
-
-    background-image: var(--vne-cursor-src)
-
-    background-position: center
-    background-size: contain
-    background-repeat: no-repeat
-
-    pointer-events: none
-
-    opacity: 0
-
-    &_isShow
-        opacity 1