@vnejs/uis.react.icon 0.1.2 → 0.1.4

package/dist/Icon.d.ts

@@ -1,4 +1,3 @@
-import "./Icon.styl";
 export declare const Icon: ({ zIndex, transition, width, height, marginTop, marginRight, marginBottom, marginLeft, aspectRatioX, aspectRatioY, transformOriginX, transformOriginY, scale, opacity, className, src, srcHover, isDisabled, isNotRender, isOpacityOnHover, view, onClick, value, }: {
     zIndex?: any;
     transition?: number;

package/dist/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../src/Icon.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAIrB,eAAO,MAAM,IAAI,GAAI;;;;;;;;;;;;;;;;;;;;;;;;CAwBpB,4CAyDA,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../src/Icon.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,IAAI,GAAI;;;;;;;;;;;;;;;;;;;;;;;;CAwBpB,4CAyDA,CAAC"}

package/dist/Icon.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
-import { cn, getVneLength } from "@vnejs/uis.utils";
-import "./Icon.styl";
-const b = cn("Icon");
+import { getVneLength } from "@vnejs/uis.utils";
+import { b } from "./Icon.styles.js";
 export const Icon = ({ zIndex = null, transition = 300, width = 0, height = 0, marginTop = 0, marginRight = 0, marginBottom = 0, marginLeft = 0, aspectRatioX = 0, aspectRatioY = 0, transformOriginX = null, transformOriginY = null, scale = null, opacity = null, className, src, srcHover, isDisabled = false, isNotRender = false, isOpacityOnHover = false, view = "", onClick, value, }) => {
     const withHoverSrc = !isDisabled && Boolean(srcHover);
     const withOpacityOnHover = !isDisabled && isOpacityOnHover;

package/dist/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../src/Icon.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../src/Icon.tsx"],"names":[],"mappings":"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"}

package/dist/Icon.styles.d.ts

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

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

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

package/dist/Icon.styles.js

@@ -0,0 +1,25 @@
+import { cn, injectStyles, sel } from "@vnejs/uis.utils";
+export const b = cn("Icon");
+const CSS = `
+${sel(b())} {
+  display: block;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: var(--vne-icon-src);
+}
+
+${sel(b({ withHoverSrc: true }))}[vne-cursor-target] {
+  background-image: var(--vne-icon-src-hover);
+}
+
+${sel(b({ withOpacityOnHover: true }))} {
+  opacity: 1;
+}
+
+${sel(b({ withOpacityOnHover: true }))}[vne-cursor-target] {
+  opacity: 0.75;
+}
+`;
+injectStyles(CSS);
+//# sourceMappingURL=Icon.styles.js.map

package/dist/Icon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.styles.js","sourceRoot":"","sources":["../src/Icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC;AAE5B,MAAM,GAAG,GAAG;EACV,GAAG,CAAC,CAAC,EAAE,CAAC;;;;;;;;EAQR,GAAG,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;;;;EAI9B,GAAG,CAAC,CAAC,CAAC,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC,CAAC;;;;EAIpC,GAAG,CAAC,CAAC,CAAC,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC,CAAC;;;CAGrC,CAAC;AAEF,YAAY,CAAC,GAAG,CAAC,CAAC"}

package/package.json

@@ -1,31 +1,26 @@
 {
   "name": "@vnejs/uis.react.icon",
-  "version": "0.1.2",
+  "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"
+    "@vnejs/uis.utils": "~0.1.0"
   },
   "devDependencies": {
-    "@vnejs/uis.react": "~0.1.0",
-    "typescript": "^5.7.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/Icon.stories.tsx

@@ -0,0 +1,34 @@
+import { renderWithVneWrap, VneWrap } from "@vnejs/uis.react";
+
+import { Icon, Flex } from "@vnejs/uis.react";
+
+export const Common = {
+  args: {
+    ...VneWrap.DEFAULT_ARGS,
+
+    zIndex: 10,
+    width: 120,
+    height: 120,
+    transition: 300,
+    src: "./icons/Hide.png",
+    isDisabled: false,
+  },
+};
+
+export default {
+  title: "Primitives/Icon",
+  render: renderWithVneWrap((args) => <Icon {...args} />),
+  argTypes: {
+    ...VneWrap.ARGS,
+
+    // Icon
+    zIndex: { control: { type: "number", min: -100, max: 100, step: 5 } },
+    width: { control: { type: "number", min: 120, max: 600, step: 12 } },
+    height: { control: { type: "number", min: 60, max: 480, step: 12 } },
+    aspectRatioX: { control: { type: "number", min: 0, max: 20, step: 1 } },
+    aspectRatioY: { control: { type: "number", min: 0, max: 20, step: 1 } },
+    transition: { control: { type: "number", min: 0, max: 600, step: 30 } },
+    src: { control: { type: "select" }, options: ["./icons/Hide.png", "./icons/History.png", "./icons/Settings.png"] },
+    srcHover: { control: { type: "select" }, options: ["./icons/Hide_H.png", "./icons/History_H.png", "./icons/Settings_H.png"] },
+  },
+};

package/src/Icon.styles.ts

@@ -0,0 +1,27 @@
+import { cn, injectStyles, sel } from "@vnejs/uis.utils";
+
+export const b = cn("Icon");
+
+const CSS = `
+${sel(b())} {
+  display: block;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: var(--vne-icon-src);
+}
+
+${sel(b({ withHoverSrc: true }))}[vne-cursor-target] {
+  background-image: var(--vne-icon-src-hover);
+}
+
+${sel(b({ withOpacityOnHover: true }))} {
+  opacity: 1;
+}
+
+${sel(b({ withOpacityOnHover: true }))}[vne-cursor-target] {
+  opacity: 0.75;
+}
+`;
+
+injectStyles(CSS);

package/src/Icon.tsx

@@ -0,0 +1,88 @@
+import { useCallback, useMemo } from "react";
+
+import { getVneLength } from "@vnejs/uis.utils";
+
+import { b } from "./Icon.styles.js";
+
+export const Icon = ({
+  zIndex = null,
+  transition = 300,
+  width = 0,
+  height = 0,
+  marginTop = 0,
+  marginRight = 0,
+  marginBottom = 0,
+  marginLeft = 0,
+  aspectRatioX = 0,
+  aspectRatioY = 0,
+  transformOriginX = null,
+  transformOriginY = null,
+  scale = null,
+  opacity = null,
+  className,
+  src,
+  srcHover,
+  isDisabled = false,
+  isNotRender = false,
+  isOpacityOnHover = false,
+  view = "",
+  onClick,
+  value,
+}) => {
+  const withHoverSrc = !isDisabled && Boolean(srcHover);
+  const withOpacityOnHover = !isDisabled && isOpacityOnHover;
+
+  const style = useMemo(() => {
+    const result: Record<string, any> = {};
+
+    if (width) result.width = getVneLength(width);
+    if (height) result.height = getVneLength(height);
+
+    if (scale) result.transform = `scale(${scale})`;
+    if (transformOriginX !== null || transformOriginY !== null) result.transformOrigin = `${transformOriginX || 0} ${transformOriginY || 0}`;
+    if (aspectRatioX || aspectRatioY) result.aspectRatio = `${aspectRatioX || 1} / ${aspectRatioY || 1}`;
+    if (zIndex !== null) result.zIndex = zIndex;
+    if (opacity !== null) result.opacity = opacity;
+    if (transition !== null) result.transition = transition ? `${transition}ms` : "none";
+
+    if (marginTop) result.marginTop = getVneLength(marginTop);
+    if (marginRight) result.marginRight = getVneLength(marginRight);
+    if (marginBottom) result.marginBottom = getVneLength(marginBottom);
+    if (marginLeft) result.marginLeft = getVneLength(marginLeft);
+
+    if (src) result["--vne-icon-src"] = `url("${src}")`;
+    if (srcHover) result["--vne-icon-src-hover"] = `url("${srcHover}")`;
+
+    return result;
+  }, [
+    zIndex,
+    transition,
+    opacity,
+    width,
+    height,
+    aspectRatioX,
+    aspectRatioY,
+    transformOriginX,
+    transformOriginY,
+    scale,
+    src,
+    srcHover,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+  ]);
+
+  const onClickHandler = useCallback(() => !isDisabled && onClick && onClick(value), [onClick, value, isDisabled]);
+
+  if (isNotRender) return null;
+
+  return (
+    <div
+      className={b({ view, isDisabled, withHoverSrc, withOpacityOnHover }, [className])}
+      onClick={onClickHandler}
+      style={style}
+      vne-cursor-type={!isDisabled ? "pointer" : ""}
+    />
+  );
+};

package/src/index.ts

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

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

@@ -1,16 +0,0 @@
-.Icon
-    display: block
-
-    background-size: 100% 100%;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-image: var(--vne-icon-src)
-
-    &_withHoverSrc[vne-cursor-target]
-        background-image: var(--vne-icon-src-hover)
-
-    &_withOpacityOnHover
-        opacity: 1
-
-        &[vne-cursor-target]
-            opacity: 0.75