@vnejs/uis.react.backdrop 0.1.2 → 0.1.4

package/dist/Backdrop.d.ts

@@ -1,4 +1,3 @@
-import "./Backdrop.styl";
 export declare const Backdrop: {
     ({ zIndex, transition, type, size, opacity, color1, color2, className, children }: {
         zIndex?: any;

package/dist/Backdrop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.d.ts","sourceRoot":"","sources":["../src/Backdrop.tsx"],"names":[],"mappings":"AAIA,OAAO,iBAAiB,CAAC;AAIzB,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;CAwBpB,CAAC"}
+{"version":3,"file":"Backdrop.d.ts","sourceRoot":"","sources":["../src/Backdrop.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;CAwBpB,CAAC"}

package/dist/Backdrop.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 "./Backdrop.styl";
-const b = cn("Backdrop");
+import { getVneLength } from "@vnejs/uis.utils";
+import { b } from "./Backdrop.styles.js";
 export const Backdrop = ({ zIndex = null, transition = null, type = "", size = 360, opacity = 1, color1, color2, className, children }) => {
     const style = useMemo(() => {
         const TYPE_TO_DEGREE = { [Backdrop.TYPE.BOTTOM]: 0, [Backdrop.TYPE.LEFT]: 90, [Backdrop.TYPE.TOP]: 180, [Backdrop.TYPE.RIGHT]: 270 };

package/dist/Backdrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../src/Backdrop.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,iBAAiB,CAAC;AAEzB,MAAM,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC;AAEzB,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,UAAU,GAAG,IAAI,EAAE,IAAI,GAAG,EAAE,EAAE,IAAI,GAAG,GAAG,EAAE,OAAO,GAAG,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxI,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,cAAc,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;QAErI,MAAM,MAAM,GAAwB,EAAE,CAAC,uBAAuB,CAAC,EAAE,GAAG,cAAc,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC;QAE9H,MAAM,CAAC,uBAAuB,CAAC,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;QAErD,IAAI,MAAM;YAAE,MAAM,CAAC,wBAAwB,CAAC,GAAG,MAAM,CAAC;QACtD,IAAI,MAAM;YAAE,MAAM,CAAC,wBAAwB,CAAC,GAAG,MAAM,CAAC;QACtD,IAAI,MAAM,KAAK,IAAI;YAAE,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;QAC5C,IAAI,UAAU,KAAK,IAAI;YAAE,MAAM,CAAC,UAAU,GAAG,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,CAAC;QAE3F,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAElD,OAAO,CACL,cACE,SAAS,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,EACnC,KAAK,EAAE,KAAK,YAEX,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,IAAI,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../src/Backdrop.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,sBAAsB,CAAC;AAEzC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,UAAU,GAAG,IAAI,EAAE,IAAI,GAAG,EAAE,EAAE,IAAI,GAAG,GAAG,EAAE,OAAO,GAAG,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxI,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,cAAc,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;QAErI,MAAM,MAAM,GAAwB,EAAE,CAAC,uBAAuB,CAAC,EAAE,GAAG,cAAc,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC;QAE9H,MAAM,CAAC,uBAAuB,CAAC,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;QAErD,IAAI,MAAM;YAAE,MAAM,CAAC,wBAAwB,CAAC,GAAG,MAAM,CAAC;QACtD,IAAI,MAAM;YAAE,MAAM,CAAC,wBAAwB,CAAC,GAAG,MAAM,CAAC;QACtD,IAAI,MAAM,KAAK,IAAI;YAAE,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;QAC5C,IAAI,UAAU,KAAK,IAAI;YAAE,MAAM,CAAC,UAAU,GAAG,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,CAAC;QAE3F,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAElD,OAAO,CACL,cACE,SAAS,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,EACnC,KAAK,EAAE,KAAK,YAEX,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,IAAI,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC"}

package/dist/Backdrop.styles.d.ts

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

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

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

package/dist/Backdrop.styles.js

@@ -0,0 +1,52 @@
+import { cn, injectStyles, sel } from "@vnejs/uis.utils";
+export const b = cn("Backdrop");
+const typeTop = sel(b({ type: "top" }));
+const typeRight = sel(b({ type: "right" }));
+const typeBottom = sel(b({ type: "bottom" }));
+const typeLeft = sel(b({ type: "left" }));
+const CSS = `
+${sel(b())} {
+  --vne-backdrop-color-1: rgba(0, 0, 0, 85%);
+  --vne-backdrop-color-2: rgba(0, 0, 0, 0%);
+  --vne-backdrop-degree: 0deg;
+  display: block;
+  position: absolute;
+  background: linear-gradient(var(--vne-backdrop-degree), var(--vne-backdrop-color-1) 0%, var(--vne-backdrop-color-2) 100%);
+}
+
+${typeTop},
+${typeRight},
+${typeLeft} {
+  top: 0;
+}
+
+${typeTop},
+${typeRight},
+${typeBottom} {
+  right: 0;
+}
+
+${typeRight},
+${typeBottom},
+${typeLeft} {
+  bottom: 0;
+}
+
+${typeTop},
+${typeBottom},
+${typeLeft} {
+  left: 0;
+}
+
+${typeTop},
+${typeBottom} {
+  height: var(--vne-backdrop-length);
+}
+
+${typeRight},
+${typeLeft} {
+  width: var(--vne-backdrop-length);
+}
+`;
+injectStyles(CSS);
+//# sourceMappingURL=Backdrop.styles.js.map

package/dist/Backdrop.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Backdrop.styles.js","sourceRoot":"","sources":["../src/Backdrop.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC;AAEhC,MAAM,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;AACxC,MAAM,SAAS,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;AAC5C,MAAM,UAAU,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;AAC9C,MAAM,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;AAE1C,MAAM,GAAG,GAAG;EACV,GAAG,CAAC,CAAC,EAAE,CAAC;;;;;;;;;EASR,OAAO;EACP,SAAS;EACT,QAAQ;;;;EAIR,OAAO;EACP,SAAS;EACT,UAAU;;;;EAIV,SAAS;EACT,UAAU;EACV,QAAQ;;;;EAIR,OAAO;EACP,UAAU;EACV,QAAQ;;;;EAIR,OAAO;EACP,UAAU;;;;EAIV,SAAS;EACT,QAAQ;;;CAGT,CAAC;AAEF,YAAY,CAAC,GAAG,CAAC,CAAC"}

package/package.json

@@ -1,31 +1,26 @@
 {
   "name": "@vnejs/uis.react.backdrop",
-  "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/Backdrop.stories.tsx

@@ -0,0 +1,33 @@
+import { VneWrap } from "@vnejs/uis.react";
+
+import { Backdrop } from "@vnejs/uis.react";
+
+export const Common = {
+  args: {
+    vneHeight: 720,
+    type: Backdrop.TYPE.TOP,
+    zIndex: 10,
+    size: 180,
+  },
+};
+
+export default {
+  title: "Primitives/Backdrop",
+  render: ({ vneHeight, ...args }) => (
+    <VneWrap height={vneHeight}>
+      <Backdrop {...args} />
+    </VneWrap>
+  ),
+  argTypes: {
+    // Engine
+    vneHeight: { control: { type: "number", min: 180, max: 2160, step: 45 } },
+
+    // Backdrop
+    zIndex: { control: { type: "number", min: -100, max: 100, step: 5 } },
+    type: { control: { type: "select" }, options: Object.values(Backdrop.TYPE) },
+    size: { control: { type: "number", min: 120, max: 600, step: 12 } },
+    color1: { control: { type: "select" }, options: ["", "red", "green", "blue", "black"] },
+    color2: { control: { type: "select" }, options: ["", "red", "green", "blue", "black"] },
+    transition: { control: { type: "number", min: 0, max: 600, step: 30 } },
+  },
+};

package/src/Backdrop.styles.ts

@@ -0,0 +1,55 @@
+import { cn, injectStyles, sel } from "@vnejs/uis.utils";
+
+export const b = cn("Backdrop");
+
+const typeTop = sel(b({ type: "top" }));
+const typeRight = sel(b({ type: "right" }));
+const typeBottom = sel(b({ type: "bottom" }));
+const typeLeft = sel(b({ type: "left" }));
+
+const CSS = `
+${sel(b())} {
+  --vne-backdrop-color-1: rgba(0, 0, 0, 85%);
+  --vne-backdrop-color-2: rgba(0, 0, 0, 0%);
+  --vne-backdrop-degree: 0deg;
+  display: block;
+  position: absolute;
+  background: linear-gradient(var(--vne-backdrop-degree), var(--vne-backdrop-color-1) 0%, var(--vne-backdrop-color-2) 100%);
+}
+
+${typeTop},
+${typeRight},
+${typeLeft} {
+  top: 0;
+}
+
+${typeTop},
+${typeRight},
+${typeBottom} {
+  right: 0;
+}
+
+${typeRight},
+${typeBottom},
+${typeLeft} {
+  bottom: 0;
+}
+
+${typeTop},
+${typeBottom},
+${typeLeft} {
+  left: 0;
+}
+
+${typeTop},
+${typeBottom} {
+  height: var(--vne-backdrop-length);
+}
+
+${typeRight},
+${typeLeft} {
+  width: var(--vne-backdrop-length);
+}
+`;
+
+injectStyles(CSS);

package/src/Backdrop.tsx

@@ -0,0 +1,33 @@
+import { useMemo } from "react";
+
+import { getVneLength } from "@vnejs/uis.utils";
+
+import { b } from "./Backdrop.styles.js";
+
+export const Backdrop = ({ zIndex = null, transition = null, type = "", size = 360, opacity = 1, color1, color2, className, children }) => {
+  const style = useMemo(() => {
+    const TYPE_TO_DEGREE = { [Backdrop.TYPE.BOTTOM]: 0, [Backdrop.TYPE.LEFT]: 90, [Backdrop.TYPE.TOP]: 180, [Backdrop.TYPE.RIGHT]: 270 };
+
+    const result: Record<string, any> = { ["--vne-backdrop-degree"]: `${TYPE_TO_DEGREE[type || Backdrop.TYPE.TOP]}deg`, opacity };
+
+    result["--vne-backdrop-length"] = getVneLength(size);
+
+    if (color1) result["--vne-backdrop-color-1"] = color1;
+    if (color2) result["--vne-backdrop-color-2"] = color2;
+    if (zIndex !== null) result.zIndex = zIndex;
+    if (transition !== null) result.transition = transition === 0 ? "none" : `${transition}ms`;
+
+    return result;
+  }, [zIndex, size, type, color1, color2, opacity]);
+
+  return (
+    <div
+      className={b({ type }, [className])}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+};
+
+Backdrop.TYPE = { TOP: "top", RIGHT: "right", BOTTOM: "bottom", LEFT: "left" };

package/src/index.ts

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

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

@@ -1,39 +0,0 @@
-.Backdrop
-    --vne-backdrop-color-1: rgba(0, 0, 0, 85%);
-    --vne-backdrop-color-2: rgba(0, 0, 0, 0%);
-
-    --vne-backdrop-degree: 0deg
-
-    display: block
-    position: absolute
-
-    background: linear-gradient(var(--vne-backdrop-degree), var(--vne-backdrop-color-1) 0%, var(--vne-backdrop-color-2) 100%)
-
-    &_type_top,
-    &_type_right,
-    &_type_left
-        top: 0
-
-    &_type_top,
-    &_type_right,
-    &_type_bottom
-        right: 0
-
-    &_type_right,
-    &_type_bottom,
-    &_type_left
-        bottom: 0
-
-    &_type_top,
-    &_type_bottom,
-    &_type_left
-        left: 0
-
-    &_type_top,
-    &_type_bottom
-        height: var(--vne-backdrop-length)
-
-    &_type_right,
-    &_type_left
-        width: var(--vne-backdrop-length)
-