ranui 0.1.10-alpha.2 → 0.1.10-alpha.22

package/dist/utils/color.d.ts

@@ -0,0 +1,52 @@
+export declare const hsv2hsl: (h: number, s: number, v: number) => {
+    h: number;
+    s: number;
+    l: number;
+};
+export declare const hex2alpha: (aa: string) => number;
+export declare const hex2hsl: (hex: string) => {
+    h: number;
+    s: number;
+    l: number;
+};
+export declare const hex2hsv: (hex: string) => {
+    h: number;
+    s: number;
+    v: number;
+};
+export declare const hex2rgb: (hex: string) => {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare const rgb2hsv: (r: number, g: number, b: number) => {
+    h: number;
+    s: number;
+    v: number;
+};
+export declare const hsl2hsv: (h: number, s: number, l: number) => {
+    h: number;
+    s: number;
+    v: number;
+};
+export declare const hsl2rgb: (h: number, s: number, l: number) => {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare const hsv2rgb: (h: number, s: number, v: number) => {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare const rgb2hex: (r: number, g: number, b: number) => string;
+export declare const rgba: (r: number, g: number, b: number, a: number) => string;
+export declare const rgba2hex: (r: number, g: number, b: number, a: number) => string;
+export declare const rgba2rgb: (r: number, g: number, b: number, a: number) => {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare const HEX_COLOR_REGEX: RegExp;
+export declare const RGB_REGEX: RegExp;
+export declare const RGBA_REGEX: RegExp;

package/dist/utils/image.d.ts

@@ -0,0 +1,39 @@
+type ImgType = HTMLImageElement | HTMLCanvasElement;
+/**
+ * 根据路径获取图片对象
+ * @param { string } src 图片路径
+ * @returns { Promise<HTMLImageElement> } 图片标签
+ */
+export declare const getImage: (src: string) => Promise<ImgType>;
+/**
+ * 切割圆角
+ * @param img 将要裁剪的图片对象
+ * @param radius 裁剪的圆角半径
+ * @returns 返回一个离屏 canvas 用于渲染
+ */
+export declare const cutRound: (img: ImgType, radius: number) => ImgType;
+/**
+ * 透明度
+ * @param img 将要处理的图片对象
+ * @param opacity 透明度
+ * @returns 返回一个离屏 canvas 用于渲染
+ */
+export declare const opacity: (img: ImgType, opacity: number) => ImgType;
+/**
+ * 权重矩阵
+ * @param radius 模糊半径
+ * @param sigma
+ * @returns 返回一个权重和为1的矩阵
+ */
+export declare const getMatrix: (radius: number, sigma?: number) => number[];
+/**
+ * 高斯模糊
+ * @param img 将要处理的图片对象
+ * @param radius 模糊半径
+ * @returns 返回一个离屏 canvas 用于渲染
+ */
+export declare const blur: (img: ImgType) => ImgType;
+export declare const getBase64Image: (imageFile: File) => Promise<{
+    base64: string | ArrayBuffer | null;
+}>;
+export {};

package/dist/utils/index.d.ts

@@ -0,0 +1,72 @@
+export declare const falseList: (string | boolean | null | undefined)[];
+/**
+ * @description: 判断这个元素上是否有 disabled 属性
+ * @param {Element} element
+ * @return {*}
+ */
+export declare const isDisabled: (element: Element) => boolean;
+/**
+ * @description: 查询指定元素的子级元素，删除他们的某一个指定 class
+ * @param {Element} parent
+ * @param {string} deleteClass
+ */
+export declare const removeClassToElementChild: (parent: Element, deleteClass: string) => void;
+/**
+ * @description: 创建 icon 的文档示例
+ */
+export declare const createIconList: () => void;
+export declare const loadScript: (src: string) => Promise<{
+    success: boolean;
+}>;
+export interface CustomErrorType {
+    new (m: string): void;
+}
+export declare function createCustomError(msg?: string): CustomErrorType;
+export declare const vod: {
+    FD: {
+        label: string;
+    };
+    LD: {
+        bandWidth: {
+            h264: number;
+            h265: number;
+        };
+        label: string;
+    };
+    SD: {
+        bandWidth: {
+            h264: number;
+            h265: number;
+        };
+        label: string;
+    };
+    HD: {
+        bandWidth: {
+            h264: number;
+            h265: number;
+        };
+        label: string;
+    };
+    '2K': {
+        bandWidth: {
+            h264: number;
+            h265: number;
+        };
+        label: string;
+    };
+    '4K': {
+        bandWidth: {
+            h264: number;
+            h265: number;
+        };
+        label: string;
+    };
+};
+export declare const HTMLElementSSR: () => {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+} | null;
+export declare const createSignal: <T = unknown>(value: T, options?: {
+    subscriber?: Function[];
+    equals?: boolean | ((prev: T | undefined, next: T) => boolean);
+}) => [() => T, (newValue: T) => void];

package/dist/utils/math.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 转换为运算角度
+ * @param { number } deg 数学角度
+ * @return { number } 运算角度
+ */
+export declare const getAngle: (deg: number) => number;
+/**
+ * 根据角度计算圆上的点
+ * @param { number } deg 运算角度
+ * @param { number } r 半径
+ * @return { Array<number> } 坐标 [x, y]
+ */
+export declare const getArcPointerByDeg: (deg: number, r: number) => [number, number];
+/**
+ * 根据点计算切线方程
+ * @param { number } x 横坐标
+ * @param { number } y 纵坐标
+ * @return { Array<number> } [斜率，常数]
+ */
+export declare const getTangentByPointer: (x: number, y: number) => Array<number>;
+export declare const fanShapedByArc: (ctx: CanvasRenderingContext2D, maxRadius: number, start: number, end: number, gutter: number) => void;
+export declare const roundRectByArc: (ctx: CanvasRenderingContext2D, ...[x, y, w, h, r]: number[]) => void;
+/**
+ * 创建线性渐变色
+ */
+export declare const getLinearGradient: (ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, background: string) => void;

package/dist/utils/tween.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 缓动函数
+ * t: current time（当前时间）
+ * b: beginning value（初始值）
+ * c: change in value（变化量）
+ * d: duration（持续时间）
+ *
+ * 感谢张鑫旭大佬 https://github.com/zhangxinxu/Tween
+ */
+interface SpeedType {
+    easeIn: (...arr: number[]) => number;
+    easeOut: (...arr: number[]) => number;
+}
+export declare const quad: SpeedType;
+export declare const cubic: SpeedType;
+export declare const quart: SpeedType;
+export declare const quint: SpeedType;
+export declare const sine: SpeedType;
+export declare const expo: SpeedType;
+export declare const circ: SpeedType;
+export {};

package/dist/vite.config.d.ts

@@ -0,0 +1,7 @@
+import type { BuildOptions, UserConfig } from 'vite';
+export declare const umd: BuildOptions;
+export declare const umdShadowless: BuildOptions;
+export declare const es: BuildOptions;
+export declare const viteConfig: UserConfig;
+declare const _default: UserConfig;
+export default _default;

package/dist/without-content-CdJw7vHM.js

@@ -0,0 +1,4 @@
+const withoutContent = { "success": true, "_identification": true, "data": '<svg t="1742629778506" class="icon" viewBox="0 0 1366 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="31273" width="200" height="200"><path d="M1230.155 778.399V472.604l133.84-51.746-94.113-140.41 83.29 13.815 0.676-4.006 6.486-9.634L1204.75 176.19l-2.05 2.985 1.283-3.578L735.283 1.087 734 4.496l-1.197-3.494-550.626 182.523-0.338-0.598-2.303 1.619-0.43-0.083-0.597 0.85L0 311.57l7.076 9.972L8.78 325.8l97.353-40.064-70.926 98.38 140.747 78.94 0.168 312.863h3.838l-1.873 3.415 438.699 244.578 0.083-0.084v0.168l15.428-0.084v0.084l0.253-0.084h0.262v-0.084l597.428-245.262-0.085-0.168z m89.34-505.88l-61.802-10.223-38.106-56.866 99.908 67.09zM742.443 20.782l438.438 163.252-438.438 164.28V20.78z m451.654 175.355l145.522 217.047-605.703 234.1-100.084-241.176 560.265-209.97zM63.934 285.822l85.848-60.698-25.997 36.143-59.851 24.555z m-5.28 93.177L134.1 274.315l1.873-0.768-0.514-1.196 48.852-67.856 428.377 201.357-75.7 241.515L58.653 379zM192.07 768.85l-0.175-296.76 354.386 198.803 68.625-218.92 1.788 553.697L192.07 768.85z m8.184-574.587L726.5 19.843v334.433l-103.323 38.79-422.924-198.803z m1013.96 573.56L632.727 1006.52l-1.795-565.798 94.204 227.107 489.078-189v288.994z" fill="currentColor" p-id="31274"></path></svg>' };
+export {
+  withoutContent as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ranui",
-  "version": "0.1.10-alpha.2",
+  "version": "0.1.10-alpha.22",
   "description": "UI Component library based on `Web Component`",
   "main": "dist/umd/index.umd.cjs",
   "module": "dist/index.js",
@@ -18,7 +18,19 @@
   "author": "chaxus",
   "license": "MIT",
   "engines": {
-    "node": ">=12.20.0"
+    "node": ">=23.10.0"
+  },
+  "scripts": {
+    "dev": "vite --host",
+    "build": "sh ./bin/build.sh",
+    "build:es": "vite build -c ./build/config.es.ts",
+    "build:umd": "vite build -c ./build/config.umd.ts",
+    "prepublish": "npm run build",
+    "test": "sh ./bin/test.sh",
+    "test:report": "playwright show-report",
+    "test:ui": "playwright test --ui",
+    "test:update": "playwright test --update-snapshots",
+    "tsc": "tsc --noEmit"
   },
   "files": [
     "dist",
@@ -34,7 +46,8 @@
     "web components",
     "webComponents",
     "ranui",
-    "@ranui/react"
+    "@ranui/react",
+    "lib"
   ],
   "exports": {
     ".": {
@@ -44,144 +57,158 @@
     },
     "./shadowless": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/shadowless/shadowless/index.js",
+      "import": "./dist/shadowless.js",
       "require": "./dist/umd/shadowless/shadowless.umd.cjs"
     },
     "./button": {
-      "types": "./dist/components/button/index.d.ts",
-      "import": "./dist/components/button/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/button.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./icon": {
-      "types": "./dist/components/icon/index.d.ts",
-      "import": "./dist/components/icon/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/icon.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./image": {
-      "types": "./dist/components/image/index.d.ts",
-      "import": "./dist/components/image/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/image.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./input": {
-      "types": "./dist/components/input/index.d.ts",
-      "import": "./dist/components/input/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/input.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./message": {
-      "types": "./dist/components/message/index.d.ts",
-      "import": "./dist/components/message/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/message.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./preview": {
-      "types": "./dist/components/preview/index.d.ts",
-      "import": "./dist/components/preview/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/preview.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./skeleton": {
-      "types": "./dist/components/skeleton/index.d.ts",
-      "import": "./dist/components/skeleton/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/skeleton.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./tab": {
-      "types": "./dist/components/tab/index.d.ts",
-      "import": "./dist/components/tab/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/tab.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./tabpane": {
-      "types": "./dist/components/tabpane/index.d.ts",
-      "import": "./dist/components/tabpane/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/tabpane.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./radar": {
-      "types": "./dist/components/radar/index.d.ts",
-      "import": "./dist/components/radar/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/radar.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./modal": {
-      "types": "./dist/components/modal/index.d.ts",
-      "import": "./dist/components/modal/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/modal.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./select": {
-      "types": "./dist/components/select/index.d.ts",
-      "import": "./dist/components/select/index.js",
-      "require": "./dist/umd/index.umd.cjs"
-    },
-    "./option": {
-      "types": "./dist/components/option/index.d.ts",
-      "import": "./dist/components/option/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/select.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./progress": {
-      "types": "./dist/components/progress/index.d.ts",
-      "import": "./dist/components/progress/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/progress.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./player": {
-      "types": "./dist/components/player/index.d.ts",
-      "import": "./dist/components/player/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/player.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./popover": {
-      "types": "./dist/components/popover/index.d.ts",
-      "import": "./dist/components/popover/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/popover.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./content": {
-      "types": "./dist/components/content/index.d.ts",
-      "import": "./dist/components/content/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/content.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./loading": {
-      "types": "./dist/components/loading/index.d.ts",
-      "import": "./dist/components/loading/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/loading.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./colorpicker": {
-      "types": "./dist/components/colorpicker/index.d.ts",
-      "import": "./dist/components/colorpicker/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/colorpicker.js",
+      "require": "./dist/umd/index.umd.cjs"
+    },
+    "./math": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/math.js",
+      "require": "./dist/umd/index.umd.cjs"
+    },
+    "./checkbox": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/checkbox.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./style": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/style.css",
+      "import": "./dist/ranui.css",
       "require": "./dist/umd/index.umd.cjs"
+    },
+    "./type": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./typings": {
+      "types": "./dist/typings.d.ts",
+      "import": "./dist/typings.d.ts",
+      "require": "./dist/index.js"
+    },
+    "./dist/*": {
+      "types": "./dist/*",
+      "import": "./dist/*",
+      "require": "./dist/*"
     }
   },
   "devDependencies": {
-    "@babel/core": "^7.24.5",
-    "@babel/preset-env": "^7.24.5",
-    "@babel/preset-typescript": "^7.24.1",
-    "@playwright/test": "^1.44.0",
+    "@babel/core": "^7.26.10",
+    "@babel/plugin-transform-nullish-coalescing-operator": "^7.26.6",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-typescript": "^7.27.0",
+    "@playwright/test": "^1.51.1",
+    "@rollup/plugin-babel": "^6.0.4",
     "@types/imagemin-svgo": "^10.0.5",
-    "@types/lodash": "^4.17.1",
+    "@types/lodash": "^4.17.16",
+    "@types/lodash-es": "^4.17.12",
+    "@types/react": "^19.1.0",
     "@types/tinycolor2": "^1.4.6",
-    "@vheemstra/vite-plugin-imagemin": "^1.2.1",
-    "imagemin-svgo": "^10.0.1",
-    "less": "^4.2.0",
-    "prettier": "^2.8.8",
-    "rollup-plugin-visualizer": "^5.12.0",
-    "svgo": "^3.3.0",
-    "tsx": "^3.14.0",
-    "vite": "^5.2.11"
+    "imagemin-svgo": "^11.0.1",
+    "less": "^4.2.2",
+    "prettier": "^3.5.3",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "svgo": "^3.3.2",
+    "tsx": "^4.19.3",
+    "typescript": "^5.8.2",
+    "vite": "^6.3.0"
   },
   "dependencies": {
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.13",
     "exceljs": "^4.4.0",
     "jszip": "^3.10.1",
     "lodash": "^4.17.21",
-    "ranuts": "0.1.0-alpha.11",
+    "lodash-es": "^4.17.21",
+    "ranuts": "workspace:^",
     "tinycolor2": "^1.6.0"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "sh ./bin/build.sh",
-    "build:es": "vite build -c ./build/config.es.ts",
-    "build:umd": "vite build -c ./build/config.umd.ts",
-    "prepublish": "npm run build",
-    "test": "sh ./bin/test.sh",
-    "test:report": "playwright show-report",
-    "test:ui": "playwright test --ui",
-    "test:update": "playwright test --update-snapshots"
   }
-}
+}

package/readme.md

@@ -10,32 +10,30 @@ UI Component library based on `Web Component`
 <a href="https://github.com/chaxus/ran"><img src="https://img.badgesize.io/https:/unpkg.com/ranui/dist/umd/shadowless/shadowless.umd.cjs?label=brotli&compression=brotli" alt="brotli"></a>
 <a href="https://github.com/chaxus/ran"><img src="https://img.shields.io/badge/module%20formats-umd%2C%20esm-green.svg" alt="module formats: umd, esm"></a>
 
+**English** | [中文](./README.zh-CN.md)
+
 ## Feature
 
-1. **High Cross-Framework Compatibility**: Our solution seamlessly adapts to a wide array of leading front-end frameworks, including `React`, `Vue`, `Preact`, `SolidJS`, `Svelte`, and more. It also integrates smoothly with any project built on `JavaScript` and adhering to `W3C` standards. No matter your choice of technology stack, we guarantee consistent and reliable support.
-2. **Pure Native Experience**: Our solution eliminates the need for dependencies on front-end frameworks like `npm`, `React`/`Vue`, or complex build tools such as `webpack`/`vite`. It truly embodies the essence of Web technology. You can get started effortlessly, just like manipulating native `div` tags, immediately experiencing the purity and intuitiveness of the technology. This design not only simplifies project structure but also reduces the cost of learning and usage, enabling every developer to appreciate the native charm of Web technology.
-3. **Ultimate Modular Design**: Utilizing the principle of minimal modularization, we carefully dismantle large and complex systems or applications into extremely small, functionally independent, and easily reusable component units. This approach significantly enhances code maintainability, scalability, and reusability.
-4. **Fully Open-Source for Free Learning**: Our project fully adheres to the `MIT` open-source license, granting unrestricted access to all source code. This means you are free to access, learn from, reference, and even modify our code, whether for personal development or commercial applications. We firmly believe that open-source is a vital pathway for technological advancement and innovation.
-5. **Interactive and Comprehensive Documentation**: We provide detailed and highly interactive documentation, where all component examples are live and interactive. This allows you to directly experience the component functionality while reading, deepening your understanding and enabling quick hands-on learning. This design is aimed at providing you with the most intuitive and efficient learning experience possible.
-6. **Type-Checking Support**: Our development environment is fully built on `TypeScript`, equipped with comprehensive declaration files and type definitions, ensuring smooth integration for both `JavaScript` and `TypeScript` projects. With powerful type-checking capabilities, we significantly enhance code readability, maintainability, and project robustness, bringing unprecedented convenience and peace of mind to development work.
-7. **Enhanced Durability and Stability**: Our solution offers exceptional stability, eliminating concerns about disruptive updates encountered during version upgrades, such as `React` from version `15` to `16` (with `fiber`) or `Vue` from version `2` to `3` (with `hooks`). We ensure that your components won't be forced into unnecessary updates or redevelopments, thus avoiding potential project interruptions and additional workloads. This translates into a continuous and hassle-free project operation.
+1. **Cross-Framework Compatibility**: Works seamlessly with React, Vue, Preact, SolidJS, Svelte, and more. Integrates with any JavaScript project following W3C standards.
+2. **Pure Native Experience**: No need for npm, React/Vue, or build tools. Easy to start, like using native div tags, simplifying structure and reducing learning costs.
+3. **Modular Design**: Breaks systems into small, reusable components for enhanced maintainability and scalability.
+4. **Open-Source**: Licensed under MIT, providing free access to all source code for personal or commercial use.
+5. **Interactive Documentation**: Offers detailed, interactive documentation with live examples for efficient learning.
+6. **Type-Checking**: Built on TypeScript with full type support, ensuring robust and maintainable code.
+7. **Stability and Durability**: Framework independent (React/vue), avoid disruptive updates, and ensure continuous project operation.
 
 ## Install
 
 Using npm:
 
 ```console
-npm install ranui --save
+npm install ranui@latest --save
 ```
 
-## Document
+## Document and Example
 
 [See components and use examples](https://chaxus.github.io/ran/src/ranui/)
 
-## Example
-
-<https://github.com/chaxus/ran/blob/main/packages/ranui/index.html>
-
 ## Import
 
 Support for on-demand import, which can reduce the size of loaded js
@@ -44,21 +42,44 @@ Support for on-demand import, which can reduce the size of loaded js
 import 'ranui/button';
 ```
 
-For global components like `preview` and `message`, you need to import global styles
+If there is a `style` problem, you can import the style manually
 
 ```js
-import 'ranui/preview';
 import 'ranui/style';
 ```
 
+If there is a `type` problem, you can manually import the type
+
+```ts
+import 'ranui/typings';
+// or
+import 'ranui/dist/index.d.ts';
+// or
+import 'ranui/type';
+// or
+import 'ranui/dist/typings';
+```
+
+Not all of them. Just pick one that works
+
 Support global import
 
+```ts
+import 'ranui';
+```
+
 - ES module
 
 ```js
 import 'ranui';
 ```
 
+Or
+
+```js
+import 'ranui/button';
+```
+
 - UMD, IIFE, CJS
 
 ```html
@@ -101,12 +122,6 @@ document.body.appendChild(Button);
 
 ### jsx
 
-Since `react` has composite events, for more convenient use, `ranui` is encapsulated through `react` high-level components to form [@ranui/react](https://www.npmjs.com/package/@ranui/react).
-
-In react, it is recommended to use [@ranui/react](https://www.npmjs.com/package/@ranui/react).
-
-However, `ranui` can still be used in any `js` or `ts` framework.
-
 ```jsx
 import 'ranui';
 
@@ -132,12 +147,6 @@ import 'ranui';
 
 ### tsx
 
-Since `react` has composite events, for more convenient use, [ranui](https://www.npmjs.com/package/ranui) is encapsulated through `react` high-level components, so there is [@ranui/react](https://www.npmjs.com/package/@ranui/react).
-
-In `react`, using [@ranui/react](https://www.npmjs.com/package/@ranui/react) is silky and fully integrated into the `react` ecosystem after being wrapped in higher-order functions.
-
-However, [ranui](https://www.npmjs.com/package/ranui) can still be used in any `js` or `ts`.
-
 ```tsx
 // react 18
 import type { SyntheticEvent } from 'react';
@@ -173,35 +182,6 @@ const FilePreview = () => {
 };
 ```
 
-`jsx` defines the types of all `HTML-native` components in `TypeScript`.
-
-The `web component` type is not in the `jsx` definition.
-
-You need to add it manually.
-
-Otherwise you'll have type problems, but it actually works.
-
-```ts
-// typings.d.ts
-interface RButton {
-  type?: string;
-  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
-}
-
-interface RPreview {
-  src?: string | Blob | ArrayBuffer;
-  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
-  ref?: React.MutableRefObject<HTMLDivElement | null>;
-}
-
-declare namespace JSX {
-  interface IntrinsicElements {
-    'r-preview': React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & RPreview;
-    'r-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & RButton;
-  }
-}
-```
-
 ## Contributors
 
 <a href="https://github.com/chaxus/ran/graphs/contributors">