@vnejs/uis.react.svg 0.1.3 → 0.1.4

package/dist/Svg.d.ts

@@ -1,3 +1,2 @@
-import "./Svg.styl";
 export declare const Svg: Record<string, any>;
 //# sourceMappingURL=Svg.d.ts.map

package/dist/Svg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Svg.d.ts","sourceRoot":"","sources":["../src/Svg.tsx"],"names":[],"mappings":"AAMA,OAAO,YAAY,CAAC;AAsBpB,eAAO,MAAM,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,CAAC"}
+{"version":3,"file":"Svg.d.ts","sourceRoot":"","sources":["../src/Svg.tsx"],"names":[],"mappings":"AA0BA,eAAO,MAAM,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,CAAC"}

package/dist/Svg.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
-import { cn, getVneLength } from "@vnejs/uis.utils";
+import { getVneLength } from "@vnejs/uis.utils";
 import { SvgCross } from "./components/Cross";
-import "./Svg.styl";
-const b = cn("Svg");
+import { b } from "./Svg.styles.js";
 const useHooks = ({ isNotRender = false, color = null, colorHover = null, size = 60, opacity = null, transition = 300, onClick, value }) => {
     const style = useMemo(() => {
         const result = {};

package/dist/Svg.js.map

@@ -1 +1 @@
-{"version":3,"file":"Svg.js","sourceRoot":"","sources":["../src/Svg.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,OAAO,YAAY,CAAC;AAEpB,MAAM,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC;AAEpB,MAAM,QAAQ,GAAG,CAAC,EAAE,WAAW,GAAG,KAAK,EAAE,KAAK,GAAG,IAAI,EAAE,UAAU,GAAG,IAAI,EAAE,IAAI,GAAG,EAAE,EAAE,OAAO,GAAG,IAAI,EAAE,UAAU,GAAG,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IACzI,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,MAAM,GAAwB,EAAE,CAAC;QAEvC,IAAI,KAAK;YAAE,MAAM,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC;QAC7C,IAAI,UAAU;YAAE,MAAM,CAAC,uBAAuB,CAAC,GAAG,UAAU,CAAC;QAC7D,IAAI,UAAU;YAAE,MAAM,CAAC,UAAU,GAAG,GAAG,UAAU,IAAI,CAAC;QACtD,IAAI,OAAO,KAAK,IAAI;YAAE,MAAM,CAAC,OAAO,GAAG,OAAO,CAAC;QAC/C,IAAI,IAAI;YAAE,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAE3F,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvC,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IAE7E,OAAO,CAAC,WAAW,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC;AAC9C,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAwB,EAAE,CAAC;AAE3C,GAAG,CAAC,KAAK,GAAG,CAAC,IAAI,EAAE,EAAE;IACnB,MAAM,CAAC,WAAW,EAAE,KAAK,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE5D,IAAI,WAAW;QAAE,OAAO,IAAI,CAAC;IAE7B,OAAO,CACL,KAAC,QAAQ,OACH,IAAI,EACR,SAAS,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,EACpD,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,cAAc,GACvB,CACH,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Svg.js","sourceRoot":"","sources":["../src/Svg.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,OAAO,EAAE,CAAC,EAAE,MAAM,iBAAiB,CAAC;AAEpC,MAAM,QAAQ,GAAG,CAAC,EAAE,WAAW,GAAG,KAAK,EAAE,KAAK,GAAG,IAAI,EAAE,UAAU,GAAG,IAAI,EAAE,IAAI,GAAG,EAAE,EAAE,OAAO,GAAG,IAAI,EAAE,UAAU,GAAG,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IACzI,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,MAAM,GAAwB,EAAE,CAAC;QAEvC,IAAI,KAAK;YAAE,MAAM,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC;QAC7C,IAAI,UAAU;YAAE,MAAM,CAAC,uBAAuB,CAAC,GAAG,UAAU,CAAC;QAC7D,IAAI,UAAU;YAAE,MAAM,CAAC,UAAU,GAAG,GAAG,UAAU,IAAI,CAAC;QACtD,IAAI,OAAO,KAAK,IAAI;YAAE,MAAM,CAAC,OAAO,GAAG,OAAO,CAAC;QAC/C,IAAI,IAAI;YAAE,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAE3F,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvC,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IAE7E,OAAO,CAAC,WAAW,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC;AAC9C,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAwB,EAAE,CAAC;AAE3C,GAAG,CAAC,KAAK,GAAG,CAAC,IAAI,EAAE,EAAE;IACnB,MAAM,CAAC,WAAW,EAAE,KAAK,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE5D,IAAI,WAAW;QAAE,OAAO,IAAI,CAAC;IAE7B,OAAO,CACL,KAAC,QAAQ,OACH,IAAI,EACR,SAAS,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,EACpD,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,cAAc,GACvB,CACH,CAAC;AACJ,CAAC,CAAC"}

package/dist/Svg.styles.d.ts

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

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

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

package/dist/Svg.styles.js

@@ -0,0 +1,16 @@
+import { cn, injectStyles, sel } from "@vnejs/uis.utils";
+export const b = cn("Svg");
+const CSS = `
+${sel(b())} {
+  --vne-svg-color: var(--vne-color-primary, rgba(255, 255, 255, 60%));
+  --vne-svg-color-hover: var(--vne-color-active, rgba(255, 255, 255, 90%));
+  stroke: var(--vne-svg-color);
+  transition: 300ms;
+}
+
+${sel(b({ isHoverable: true }))}[vne-cursor-target] {
+  stroke: var(--vne-svg-color-hover);
+}
+`;
+injectStyles(CSS);
+//# sourceMappingURL=Svg.styles.js.map

package/dist/Svg.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Svg.styles.js","sourceRoot":"","sources":["../src/Svg.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC;AAE3B,MAAM,GAAG,GAAG;EACV,GAAG,CAAC,CAAC,EAAE,CAAC;;;;;;;EAOR,GAAG,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC;;;CAG9B,CAAC;AAEF,YAAY,CAAC,GAAG,CAAC,CAAC"}

package/package.json

@@ -1,30 +1,23 @@
 {
   "name": "@vnejs/uis.react.svg",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "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"
-  },
-  "devDependencies": {
-    "typescript": "^6.0.3",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4"
+    "@vnejs/uis.utils": "~0.1.0"
   },
   "files": [
     "dist",
-    "package.json"
+    "src",
+    "tsconfig.json"
   ]
 }

package/src/Svg.styles.ts

@@ -0,0 +1,18 @@
+import { cn, injectStyles, sel } from "@vnejs/uis.utils";
+
+export const b = cn("Svg");
+
+const CSS = `
+${sel(b())} {
+  --vne-svg-color: var(--vne-color-primary, rgba(255, 255, 255, 60%));
+  --vne-svg-color-hover: var(--vne-color-active, rgba(255, 255, 255, 90%));
+  stroke: var(--vne-svg-color);
+  transition: 300ms;
+}
+
+${sel(b({ isHoverable: true }))}[vne-cursor-target] {
+  stroke: var(--vne-svg-color-hover);
+}
+`;
+
+injectStyles(CSS);

package/src/Svg.tsx

@@ -0,0 +1,42 @@
+import { useCallback, useMemo } from "react";
+
+import { getVneLength } from "@vnejs/uis.utils";
+
+import { SvgCross } from "./components/Cross";
+
+import { b } from "./Svg.styles.js";
+
+const useHooks = ({ isNotRender = false, color = null, colorHover = null, size = 60, opacity = null, transition = 300, onClick, value }) => {
+  const style = useMemo(() => {
+    const result: Record<string, any> = {};
+
+    if (color) result["--vne-svg-color"] = color;
+    if (colorHover) result["--vne-svg-color-hover"] = colorHover;
+    if (transition) result.transition = `${transition}ms`;
+    if (opacity !== null) result.opacity = opacity;
+    if (size) Object.assign(result, { width: getVneLength(size), height: getVneLength(size) });
+
+    return result;
+  }, [opacity, color, size, transition]);
+
+  const onClickHandler = useCallback(() => onClick?.(value), [value, onClick]);
+
+  return [isNotRender, style, onClickHandler];
+};
+
+export const Svg: Record<string, any> = {};
+
+Svg.Cross = (args) => {
+  const [isNotRender, style, onClickHandler] = useHooks(args);
+
+  if (isNotRender) return null;
+
+  return (
+    <SvgCross
+      {...args}
+      className={b({ isHoverable: Boolean(args.onClick) })}
+      style={style}
+      onClick={onClickHandler}
+    />
+  );
+};

package/src/components/Cross.tsx

@@ -0,0 +1,26 @@
+export const SvgCross = ({ size = 60, strokeWidth = 6, style, onClick, className }) => (
+  <svg
+    className={className}
+    width={size}
+    height={size}
+    viewBox={`0 0 ${size} ${size}`}
+    xmlns="http://www.w3.org/2000/svg"
+    strokeWidth={strokeWidth}
+    strokeLinecap="round"
+    style={style}
+    onClick={onClick}
+  >
+    <line
+      x1={strokeWidth}
+      y1={strokeWidth}
+      x2={size - strokeWidth}
+      y2={size - strokeWidth}
+    />
+    <line
+      x1={size - strokeWidth}
+      y1={strokeWidth}
+      x2={strokeWidth}
+      y2={size - strokeWidth}
+    />
+  </svg>
+);

package/src/index.ts

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

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/Svg.styl

@@ -1,10 +0,0 @@
-.Svg
-    --vne-svg-color: var(--vne-color-primary, rgba(255, 255, 255, 60%))
-    --vne-svg-color-hover: var(--vne-color-active, rgba(255, 255, 255, 90%))
-
-    stroke: var(--vne-svg-color)
-
-    transition: 300ms
-
-    &_isHoverable[vne-cursor-target]
-        stroke: var(--vne-svg-color-hover)