@kcuf-ui/backdrop 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Alibaba Cloud
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cjs/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _withModel.default;
+  }
+});
+var _withModel = _interopRequireDefault(require("./with-model"));

package/dist/cjs/ui/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Ui;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _transition = _interopRequireDefault(require("@kcuf-ui/transition"));
+var _backdropHeadless = require("@kcuf-ui/backdrop-headless");
+var _jsxRuntime = require("react/jsx-runtime");
+var ScBackdrop = _styledComponents.default.div.withConfig({
+  displayName: "ui__ScBackdrop",
+  componentId: "sc-1fyzkif-0"
+})(["position:fixed;inset:0;background-color:hsl(0 0% 0% / 17%);transition:all 300ms ease-in-out;&[data-transition='entering']{opacity:1;}&[data-transition='entered']{opacity:1;}&[data-transition='exiting']{opacity:0;}&[data-transition='exited']{opacity:0;}"]);
+function Ui() {
+  var zIndex = (0, _backdropHeadless.useZIndex)();
+  var handleClick = (0, _backdropHeadless.useHandleClick)();
+  var nodeRef = (0, _react.useRef)(null);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_transition.default, {
+    nodeRef: nodeRef,
+    in: zIndex > 0,
+    mountOnEnter: true,
+    unmountOnExit: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ScBackdrop, {
+      ref: nodeRef,
+      style: {
+        zIndex: zIndex
+      },
+      onClick: handleClick
+    })
+  });
+}

package/dist/cjs/with-model/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = WithProvider;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _reactDom = require("react-dom");
+var _backdropHeadless = _interopRequireDefault(require("@kcuf-ui/backdrop-headless"));
+var _ui = _interopRequireDefault(require("../ui"));
+var _jsxRuntime = require("react/jsx-runtime");
+function WithProvider(props) {
+  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_backdropHeadless.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.default, {})
+  })), document.body);
+}

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export { default } from './with-model';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.ts"],"sourcesContent":["export { default } from './with-model';\n\nexport type {\n  BackdropProps\n} from '@kcuf-ui/backdrop-headless';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,cAAc","ignoreList":[]}

package/dist/esm/ui/index.js

@@ -0,0 +1,28 @@
+import { useRef } from 'react';
+import styled from 'styled-components';
+import Transition from '@kcuf-ui/transition';
+import { useZIndex, useHandleClick } from '@kcuf-ui/backdrop-headless';
+import { jsx as _jsx } from "react/jsx-runtime";
+var ScBackdrop = styled.div.withConfig({
+  displayName: "ui__ScBackdrop",
+  componentId: "sc-1fyzkif-0"
+})(["position:fixed;inset:0;background-color:hsl(0 0% 0% / 17%);transition:all 300ms ease-in-out;&[data-transition='entering']{opacity:1;}&[data-transition='entered']{opacity:1;}&[data-transition='exiting']{opacity:0;}&[data-transition='exited']{opacity:0;}"]);
+export default function Ui() {
+  var zIndex = useZIndex();
+  var handleClick = useHandleClick();
+  var nodeRef = useRef(null);
+  return /*#__PURE__*/_jsx(Transition, {
+    nodeRef: nodeRef,
+    in: zIndex > 0,
+    mountOnEnter: true,
+    unmountOnExit: true,
+    children: /*#__PURE__*/_jsx(ScBackdrop, {
+      ref: nodeRef,
+      style: {
+        zIndex: zIndex
+      },
+      onClick: handleClick
+    })
+  });
+}
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["useRef","styled","Transition","useZIndex","useHandleClick","jsx","_jsx","ScBackdrop","div","withConfig","displayName","componentId","Ui","zIndex","handleClick","nodeRef","in","mountOnEnter","unmountOnExit","children","ref","style","onClick"],"sources":["../../../src/ui/index.tsx"],"sourcesContent":["import {\n  ReactElement,\n  useRef\n} from 'react';\nimport styled from 'styled-components';\n\nimport Transition from '@kcuf-ui/transition';\nimport {\n  useZIndex,\n  useHandleClick\n} from '@kcuf-ui/backdrop-headless';\n\nconst ScBackdrop = styled.div`\n  position: fixed;\n  inset: 0;\n  background-color: hsl(0 0% 0% / 17%);\n  transition: all 300ms ease-in-out;\n  \n  &[data-transition='entering'] {\n    opacity: 1;\n  }\n  \n  &[data-transition='entered'] {\n    opacity: 1;\n  }\n  \n  &[data-transition='exiting'] {\n    opacity: 0;\n  }\n  \n  &[data-transition='exited'] {\n    opacity: 0;\n  }\n`;\n\nexport default function Ui(): ReactElement | null {\n  const zIndex = useZIndex();\n  const handleClick = useHandleClick();\n  const nodeRef = useRef<HTMLDivElement>(null);\n  \n  return <Transition {...{\n    nodeRef,\n    in: zIndex > 0,\n    mountOnEnter: true,\n    unmountOnExit: true\n  }}>\n    <ScBackdrop {...{\n      ref: nodeRef,\n      style: {\n        zIndex\n      },\n      onClick: handleClick\n    }} />\n  </Transition>;\n}\n"],"mappings":"AAAA,SAEEA,MAAM,QACD,OAAO;AACd,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAOC,UAAU,MAAM,qBAAqB;AAC5C,SACEC,SAAS,EACTC,cAAc,QACT,4BAA4B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEpC,IAAMC,UAAU,GAAGN,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oQAqB5B;AAED,eAAe,SAASC,EAAEA,CAAA,EAAwB;EAChD,IAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;EAC1B,IAAMW,WAAW,GAAGV,cAAc,CAAC,CAAC;EACpC,IAAMW,OAAO,GAAGf,MAAM,CAAiB,IAAI,CAAC;EAE5C,oBAAOM,IAAA,CAACJ,UAAU;IAChBa,OAAO,EAAPA,OAAO;IACPC,EAAE,EAAEH,MAAM,GAAG,CAAC;IACdI,YAAY,EAAE,IAAI;IAClBC,aAAa,EAAE,IAAI;IAAAC,QAAA,eAEnBb,IAAA,CAACC,UAAU;MACTa,GAAG,EAAEL,OAAO;MACZM,KAAK,EAAE;QACLR,MAAM,EAANA;MACF,CAAC;MACDS,OAAO,EAAER;IAAW,CAClB;EAAC,CACK,CAAC;AACf","ignoreList":[]}

package/dist/esm/with-model/index.js

@@ -0,0 +1,11 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import { createPortal } from 'react-dom';
+import BackdropHeadless from '@kcuf-ui/backdrop-headless';
+import Ui from '../ui';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function WithProvider(props) {
+  return /*#__PURE__*/createPortal(/*#__PURE__*/_jsx(BackdropHeadless, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/_jsx(Ui, {})
+  })), document.body);
+}
+//# sourceMappingURL=index.js.map

package/dist/esm/with-model/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["createPortal","BackdropHeadless","Ui","jsx","_jsx","WithProvider","props","_objectSpread","children","document","body"],"sources":["../../../src/with-model/index.tsx"],"sourcesContent":["import {\n  ReactPortal\n} from 'react';\nimport {\n  createPortal\n} from 'react-dom';\n\nimport BackdropHeadless, {\n  BackdropProps\n} from '@kcuf-ui/backdrop-headless';\n\nimport Ui from '../ui';\n\nexport default function WithProvider(props: BackdropProps): ReactPortal {\n  return createPortal(<BackdropHeadless {...props}>\n    <Ui />\n  </BackdropHeadless>, document.body);\n}\n"],"mappings":";AAGA,SACEA,YAAY,QACP,WAAW;AAElB,OAAOC,gBAAgB,MAEhB,4BAA4B;AAEnC,OAAOC,EAAE,MAAM,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEvB,eAAe,SAASC,YAAYA,CAACC,KAAoB,EAAe;EACtE,oBAAON,YAAY,cAACI,IAAA,CAACH,gBAAgB,EAAAM,aAAA,CAAAA,aAAA,KAAKD,KAAK;IAAAE,QAAA,eAC7CJ,IAAA,CAACF,EAAE,IAAE;EAAC,EACU,CAAC,EAAEO,QAAQ,CAACC,IAAI,CAAC;AACrC","ignoreList":[]}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './with-model';
+export type { BackdropProps } from '@kcuf-ui/backdrop-headless';

package/dist/types/ui/index.d.ts

@@ -0,0 +1,2 @@
+import { ReactElement } from 'react';
+export default function Ui(): ReactElement | null;

package/dist/types/with-model/index.d.ts

@@ -0,0 +1,3 @@
+import { ReactPortal } from 'react';
+import { BackdropProps } from '@kcuf-ui/backdrop-headless';
+export default function WithProvider(props: BackdropProps): ReactPortal;

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@kcuf-ui/backdrop",
+  "version": "0.0.1",
+  "description": "A singleton backdrop component.",
+  "keywords": [],
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/justnewbee/kcuf.git"
+  },
+  "homepage": "https://github.com/justnewbee/kcuf/tree/main/packages-ui/backdrop",
+  "bugs": "https://github.com/justnewbee/kcuf/issues",
+  "author": {
+    "name": "Jianchun Wang",
+    "email": "justnewbee@gmail.com"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.28.6",
+    "@babel/core": "^7.29.0",
+    "@babel/plugin-transform-react-jsx": "^7.28.6",
+    "@babel/plugin-transform-runtime": "^7.29.0",
+    "@babel/preset-env": "^7.29.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@chromatic-com/storybook": "^5.1.2",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/addon-links": "^10.3.6",
+    "@storybook/react-vite": "^10.3.6",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "babel-plugin-styled-components": "^2.1.4",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "rimraf": "^6.1.3",
+    "storybook": "^10.3.6",
+    "styled-components": "^6.4.1",
+    "typescript": "^6.0.3",
+    "@kcuf/demo-rc": "^0.6.1",
+    "@kcuf/ts-config": "^0.2.0"
+  },
+  "peerDependencies": {
+    "@babel/runtime": ">=7.0.0",
+    "react": ">=19.0.0",
+    "styled-components": ">=6.0.0"
+  },
+  "dependencies": {
+    "@kcuf-ui/backdrop-headless": "^0.0.1",
+    "@kcuf-ui/transition": "^0.0.1"
+  },
+  "scripts": {
+    "start": "storybook dev -p 6006",
+    "build:clean": "rimraf dist",
+    "build:esm": "ESM=1 babel src -d dist/esm --extensions .ts,.tsx --source-maps",
+    "build:cjs": "ESM=0 babel src -d dist/cjs --extensions .ts,.tsx",
+    "build:types": "tsc -rootDir src --outDir dist/types --declaration --noEmit false --emitDeclarationOnly --isolatedModules false",
+    "build:sb": "storybook build",
+    "build": "pnpm build:esm && pnpm build:cjs && pnpm build:types",
+    "watch": "pnpm build:esm -w"
+  }
+}