deepsea-components 5.18.2 → 5.18.4

package/README.md

@@ -1,23 +1,23 @@
-# deepsea-components
-
-[![NPM version](https://img.shields.io/npm/v/deepsea-components.svg?style=flat)](https://npmjs.org/package/deepsea-components)
-[![NPM downloads](http://img.shields.io/npm/dm/deepsea-components.svg?style=flat)](https://npmjs.org/package/deepsea-components)
-
-## Install
-
-```bash
-$ yarn install
-```
-
-```bash
-$ npm run dev
-$ npm run build
-```
-
-## Options
-
-TODO
-
-## LICENSE
-
-MIT
+# deepsea-components
+
+[![NPM version](https://img.shields.io/npm/v/deepsea-components.svg?style=flat)](https://npmjs.org/package/deepsea-components)
+[![NPM downloads](http://img.shields.io/npm/dm/deepsea-components.svg?style=flat)](https://npmjs.org/package/deepsea-components)
+
+## Install
+
+```bash
+$ yarn install
+```
+
+```bash
+$ npm run dev
+$ npm run build
+```
+
+## Options
+
+TODO
+
+## LICENSE
+
+MIT

package/dist/components/InputFile.cjs

@@ -30,28 +30,39 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
-async function getFileData(file, type) {
+function getFileData(file, type) {
+    if ("file" === type) return Promise.resolve(file);
     const fileReader = new FileReader();
-    switch(type){
-        case "arrayBuffer":
-            fileReader.readAsArrayBuffer(file);
-            break;
-        case "binary":
-            fileReader.readAsBinaryString(file);
-            break;
-        case "base64":
-            fileReader.readAsDataURL(file);
-            break;
-        case "text":
-            fileReader.readAsText(file);
-            break;
-        default:
-            return file;
-    }
-    return new Promise((resolve)=>{
+    return new Promise((resolve, reject)=>{
         fileReader.addEventListener("load", ()=>{
             resolve(fileReader.result);
         });
+        fileReader.addEventListener("error", ()=>{
+            reject(fileReader.error ?? new Error("Failed to read file"));
+        });
+        fileReader.addEventListener("abort", ()=>{
+            reject(fileReader.error ?? new Error("File reading was aborted"));
+        });
+        try {
+            switch(type){
+                case "arrayBuffer":
+                    fileReader.readAsArrayBuffer(file);
+                    break;
+                case "binary":
+                    fileReader.readAsBinaryString(file);
+                    break;
+                case "base64":
+                    fileReader.readAsDataURL(file);
+                    break;
+                case "text":
+                    fileReader.readAsText(file);
+                    break;
+                default:
+                    resolve(file);
+            }
+        } catch (error) {
+            reject(error);
+        }
     });
 }
 function InputFile(props) {

package/dist/components/InputFile.js

@@ -1,28 +1,39 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
-async function getFileData(file, type) {
+function getFileData(file, type) {
+    if ("file" === type) return Promise.resolve(file);
     const fileReader = new FileReader();
-    switch(type){
-        case "arrayBuffer":
-            fileReader.readAsArrayBuffer(file);
-            break;
-        case "binary":
-            fileReader.readAsBinaryString(file);
-            break;
-        case "base64":
-            fileReader.readAsDataURL(file);
-            break;
-        case "text":
-            fileReader.readAsText(file);
-            break;
-        default:
-            return file;
-    }
-    return new Promise((resolve)=>{
+    return new Promise((resolve, reject)=>{
         fileReader.addEventListener("load", ()=>{
             resolve(fileReader.result);
         });
+        fileReader.addEventListener("error", ()=>{
+            reject(fileReader.error ?? new Error("Failed to read file"));
+        });
+        fileReader.addEventListener("abort", ()=>{
+            reject(fileReader.error ?? new Error("File reading was aborted"));
+        });
+        try {
+            switch(type){
+                case "arrayBuffer":
+                    fileReader.readAsArrayBuffer(file);
+                    break;
+                case "binary":
+                    fileReader.readAsBinaryString(file);
+                    break;
+                case "base64":
+                    fileReader.readAsDataURL(file);
+                    break;
+                case "text":
+                    fileReader.readAsText(file);
+                    break;
+                default:
+                    resolve(file);
+            }
+        } catch (error) {
+            reject(error);
+        }
     });
 }
 function InputFile(props) {

package/dist/components/InputFileButton.cjs

@@ -35,17 +35,19 @@ function InputFileButton(props) {
     const { ref, style, disabled: __disabled, ...restInputProps } = inputProps;
     const [disabled, setDisabled] = (0, external_react_namespaceObject.useState)(false);
     const input = (0, external_react_namespaceObject.useRef)(null);
+    const isDisabled = disabled || _disabled || __disabled;
     (0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>input.current, [
         input.current
     ]);
     function onClick(e) {
         var _input_current;
-        null == (_input_current = input.current) || _input_current.click();
         null == _onClick || _onClick(e);
+        if (isDisabled || e.defaultPrevented) return;
+        null == (_input_current = input.current) || _input_current.click();
     }
     async function onDrop(e) {
         null == _onDrop || _onDrop(e);
-        if (disabled || !dragFile) return;
+        if (isDisabled || !dragFile) return;
         e.preventDefault();
         const { files } = e.dataTransfer;
         if (!files || 0 === files.length) return;
@@ -80,14 +82,14 @@ function InputFileButton(props) {
     }
     function onDragOver(e) {
         null == _onDragOver || _onDragOver(e);
-        if (disabled || !dragFile) return;
+        if (isDisabled || !dragFile) return;
         e.preventDefault();
     }
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_react_namespaceObject.Fragment, {
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_InputFile_cjs_namespaceObject.InputFile, {
                 ref: input,
-                disabled: disabled || _disabled || __disabled,
+                disabled: isDisabled,
                 style: {
                     display: "none",
                     ...style
@@ -97,11 +99,13 @@ function InputFileButton(props) {
                 type: type,
                 onValueChange: onValueChange,
                 onFileChange: onFileChange,
+                onDataChange: onDataChange,
                 clearAfterChange: clearAfterChange,
                 ...restInputProps
             }),
             /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(as, {
-                disabled: disabled || _disabled,
+                disabled: isDisabled,
+                type: "button",
                 onClick,
                 onDrop,
                 onDragOver,

package/dist/components/InputFileButton.js

@@ -7,17 +7,19 @@ function InputFileButton(props) {
     const { ref, style, disabled: __disabled, ...restInputProps } = inputProps;
     const [disabled, setDisabled] = useState(false);
     const input = useRef(null);
+    const isDisabled = disabled || _disabled || __disabled;
     useImperativeHandle(ref, ()=>input.current, [
         input.current
     ]);
     function onClick(e) {
         var _input_current;
-        null == (_input_current = input.current) || _input_current.click();
         null == _onClick || _onClick(e);
+        if (isDisabled || e.defaultPrevented) return;
+        null == (_input_current = input.current) || _input_current.click();
     }
     async function onDrop(e) {
         null == _onDrop || _onDrop(e);
-        if (disabled || !dragFile) return;
+        if (isDisabled || !dragFile) return;
         e.preventDefault();
         const { files } = e.dataTransfer;
         if (!files || 0 === files.length) return;
@@ -52,14 +54,14 @@ function InputFileButton(props) {
     }
     function onDragOver(e) {
         null == _onDragOver || _onDragOver(e);
-        if (disabled || !dragFile) return;
+        if (isDisabled || !dragFile) return;
         e.preventDefault();
     }
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(InputFile, {
                 ref: input,
-                disabled: disabled || _disabled || __disabled,
+                disabled: isDisabled,
                 style: {
                     display: "none",
                     ...style
@@ -69,11 +71,13 @@ function InputFileButton(props) {
                 type: type,
                 onValueChange: onValueChange,
                 onFileChange: onFileChange,
+                onDataChange: onDataChange,
                 clearAfterChange: clearAfterChange,
                 ...restInputProps
             }),
             /*#__PURE__*/ createElement(as, {
-                disabled: disabled || _disabled,
+                disabled: isDisabled,
+                type: "button",
                 onClick,
                 onDrop,
                 onDragOver,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepsea-components",
-  "version": "5.18.2",
+  "version": "5.18.4",
   "description": "格数科技自用组件库",
   "type": "module",
   "exports": {

package/src/components/CircleText.tsx

@@ -1,81 +1,81 @@
-"use client"
-
-import { FC, Fragment, HTMLAttributes } from "react"
-
-export interface CircleTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
-    /** 每一个方块的宽度 */
-    width: number
-    /** 每一个方块的高度 */
-    height: number
-    /** 圆弧的半径，不包含方块的高度 */
-    radius: number
-    /** 开始旋转的弧度，逆时针增加，0 为 x 轴方向 */
-    startAngel?: number
-    /** 每一个方块之间间隔的弧度 */
-    gapAngel?: number
-    /** 文字对齐的方式，默认居中 */
-    align?: "left" | "center" | "right"
-    /** 文字朝向圆心还是外侧，默认外侧 */
-    direction?: "inner" | "outer"
-    /** 是否反转文字顺序 */
-    reverse?: boolean
-    /** 分割文字的方法 */
-    separator?: string | RegExp | ((text: string) => string[])
-    /** 显示的文字 */
-    children: string
-}
-
-/** 环形文字 */
-export const CircleText: FC<CircleTextProps> = props => {
-    const {
-        width,
-        height,
-        radius,
-        startAngel = 0,
-        gapAngel = 0,
-        align = "center",
-        style,
-        direction = "outer",
-        reverse = false,
-        separator,
-        children,
-        ...rest
-    } = props
-    const unitAngle = Math.atan(width / 2 / radius) * 2
-    const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel
-    const offsetAngle = align === "left" ? 0 : align === "right" ? totalAngle : totalAngle / 2
-
-    function getTransform(idx: number) {
-        const angle = startAngel - idx * (unitAngle + gapAngel) + offsetAngle - unitAngle / 2
-        const x = (radius + height / 2) * Math.cos(angle) - width / 2
-        const y = (radius + height / 2) * Math.sin(angle) * -1 - height / 2
-        const z = Math.PI / 2 - angle + (direction === "inner" ? Math.PI : 0)
-        return `translateX(${x}px) translateY(${y}px) rotateZ(${(z / Math.PI) * 180}deg)`
-    }
-
-    const words = typeof separator === "function" ? separator(children) : children.split(separator ?? "")
-
-    if (reverse) words.reverse()
-
-    return (
-        <Fragment>
-            {words.map((w, idx) => (
-                <span
-                    key={idx}
-                    style={{
-                        position: "absolute",
-                        ...style,
-                        transform: getTransform(idx),
-                        textAlign: "center",
-                        width,
-                        lineHeight: `${height}px`,
-                        height: height,
-                    }}
-                    {...rest}
-                >
-                    {w}
-                </span>
-            ))}
-        </Fragment>
-    )
-}
+"use client"
+
+import { FC, Fragment, HTMLAttributes } from "react"
+
+export interface CircleTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** 每一个方块的宽度 */
+    width: number
+    /** 每一个方块的高度 */
+    height: number
+    /** 圆弧的半径，不包含方块的高度 */
+    radius: number
+    /** 开始旋转的弧度，逆时针增加，0 为 x 轴方向 */
+    startAngel?: number
+    /** 每一个方块之间间隔的弧度 */
+    gapAngel?: number
+    /** 文字对齐的方式，默认居中 */
+    align?: "left" | "center" | "right"
+    /** 文字朝向圆心还是外侧，默认外侧 */
+    direction?: "inner" | "outer"
+    /** 是否反转文字顺序 */
+    reverse?: boolean
+    /** 分割文字的方法 */
+    separator?: string | RegExp | ((text: string) => string[])
+    /** 显示的文字 */
+    children: string
+}
+
+/** 环形文字 */
+export const CircleText: FC<CircleTextProps> = props => {
+    const {
+        width,
+        height,
+        radius,
+        startAngel = 0,
+        gapAngel = 0,
+        align = "center",
+        style,
+        direction = "outer",
+        reverse = false,
+        separator,
+        children,
+        ...rest
+    } = props
+    const unitAngle = Math.atan(width / 2 / radius) * 2
+    const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel
+    const offsetAngle = align === "left" ? 0 : align === "right" ? totalAngle : totalAngle / 2
+
+    function getTransform(idx: number) {
+        const angle = startAngel - idx * (unitAngle + gapAngel) + offsetAngle - unitAngle / 2
+        const x = (radius + height / 2) * Math.cos(angle) - width / 2
+        const y = (radius + height / 2) * Math.sin(angle) * -1 - height / 2
+        const z = Math.PI / 2 - angle + (direction === "inner" ? Math.PI : 0)
+        return `translateX(${x}px) translateY(${y}px) rotateZ(${(z / Math.PI) * 180}deg)`
+    }
+
+    const words = typeof separator === "function" ? separator(children) : children.split(separator ?? "")
+
+    if (reverse) words.reverse()
+
+    return (
+        <Fragment>
+            {words.map((w, idx) => (
+                <span
+                    key={idx}
+                    style={{
+                        position: "absolute",
+                        ...style,
+                        transform: getTransform(idx),
+                        textAlign: "center",
+                        width,
+                        lineHeight: `${height}px`,
+                        height: height,
+                    }}
+                    {...rest}
+                >
+                    {w}
+                </span>
+            ))}
+        </Fragment>
+    )
+}

package/src/components/InputFile.tsx

@@ -12,30 +12,42 @@ export interface InputFileDataTypeMap {
 
 export type InputFileDataType = keyof InputFileDataTypeMap
 
-export async function getFileData<T extends InputFileDataType>(file: File, type: T): Promise<InputFileDataTypeMap[T]> {
-    const fileReader = new FileReader()
+export function getFileData<T extends InputFileDataType>(file: File, type: T): Promise<InputFileDataTypeMap[T]> {
+    if (type === "file") return Promise.resolve(file as InputFileDataTypeMap[T])
 
-    switch (type) {
-        case "arrayBuffer":
-            fileReader.readAsArrayBuffer(file)
-            break
-        case "binary":
-            fileReader.readAsBinaryString(file)
-            break
-        case "base64":
-            fileReader.readAsDataURL(file)
-            break
-        case "text":
-            fileReader.readAsText(file)
-            break
-        default:
-            return file as any
-    }
+    const fileReader = new FileReader()
 
-    return new Promise(resolve => {
+    return new Promise((resolve, reject) => {
         fileReader.addEventListener("load", () => {
             resolve(fileReader.result as any)
         })
+        fileReader.addEventListener("error", () => {
+            reject(fileReader.error ?? new Error("Failed to read file"))
+        })
+        fileReader.addEventListener("abort", () => {
+            reject(fileReader.error ?? new Error("File reading was aborted"))
+        })
+
+        try {
+            switch (type) {
+                case "arrayBuffer":
+                    fileReader.readAsArrayBuffer(file)
+                    break
+                case "binary":
+                    fileReader.readAsBinaryString(file)
+                    break
+                case "base64":
+                    fileReader.readAsDataURL(file)
+                    break
+                case "text":
+                    fileReader.readAsText(file)
+                    break
+                default:
+                    resolve(file as any)
+            }
+        } catch (error) {
+            reject(error)
+        }
     })
 }
 

package/src/components/InputFileButton.tsx

@@ -66,17 +66,19 @@ export function InputFileButton<
     const { ref, style, disabled: __disabled, ...restInputProps } = inputProps
     const [disabled, setDisabled] = useState(false)
     const input = useRef<HTMLInputElement>(null)
+    const isDisabled = disabled || _disabled || __disabled
 
     useImperativeHandle(ref, () => input.current!, [input.current])
 
     function onClick(e: ReactMouseEvent<ComponentRef<AS>, MouseEvent>) {
-        input.current?.click()
         _onClick?.(e as any)
+        if (isDisabled || e.defaultPrevented) return
+        input.current?.click()
     }
 
     async function onDrop(e: DragEvent<ComponentRef<AS>>) {
         _onDrop?.(e as any)
-        if (disabled || !dragFile) return
+        if (isDisabled || !dragFile) return
         e.preventDefault()
         const { files } = e.dataTransfer
         if (!files || files.length === 0) return
@@ -110,7 +112,7 @@ export function InputFileButton<
 
     function onDragOver(e: DragEvent<ComponentRef<AS>>) {
         _onDragOver?.(e as any)
-        if (disabled || !dragFile) return
+        if (isDisabled || !dragFile) return
         e.preventDefault()
     }
 
@@ -118,18 +120,20 @@ export function InputFileButton<
         <Fragment>
             <InputFile<Multiple, Type>
                 ref={input}
-                disabled={disabled || _disabled || __disabled}
+                disabled={isDisabled}
                 style={{ display: "none", ...style }}
                 multiple={multiple}
                 accept={accept}
                 type={type as Type}
                 onValueChange={onValueChange}
                 onFileChange={onFileChange}
+                onDataChange={onDataChange}
                 clearAfterChange={clearAfterChange}
                 {...restInputProps}
             />
             {createElement(as, {
-                disabled: disabled || _disabled,
+                disabled: isDisabled,
+                type: "button",
                 onClick,
                 onDrop,
                 onDragOver,

package/src/components/ReadExcel.tsx

@@ -1,13 +1,13 @@
-"use client"
-
-import { ReadSheet, ReadSheetProps } from "./ReadSheet"
-
-/**
- * @deprecated 请使用 ReadSheetProps 代替
- */
-export type ReadExcelProps = ReadSheetProps
-
-/**
- * @deprecated 请使用 ReadSheet 代替
- */
-export const ReadExcel = ReadSheet
+"use client"
+
+import { ReadSheet, ReadSheetProps } from "./ReadSheet"
+
+/**
+ * @deprecated 请使用 ReadSheetProps 代替
+ */
+export type ReadExcelProps = ReadSheetProps
+
+/**
+ * @deprecated 请使用 ReadSheet 代替
+ */
+export const ReadExcel = ReadSheet

package/src/components/ScrollMask.module.css

@@ -1,87 +1,87 @@
-.scroll-mask {
-    position: sticky;
-    z-index: 10;
-    pointer-events: none;
-}
-
-.top-scroll-mask {
-    width: 100%;
-    height: 0;
-    top: 0;
-    right: 0;
-    bottom: 100%;
-    left: 0;
-}
-
-.scroll-mask-content {
-    position: absolute;
-    background-image: linear-gradient(
-        to var(--scroll-mask-direction),
-        var(--scroll-mask-color-from, rgba(0, 0, 0, 0.1)),
-        var(--scroll-mask-color-to, rgba(0, 0, 0, 0))
-    );
-    clip-path: var(--scroll-mask-clip-path, none);
-}
-
-.top-scroll-mask-content {
-    width: 100%;
-    height: var(--scroll-mask-size, 8px);
-    top: 0;
-    right: 50%;
-    transform: translateX(50%);
-    --scroll-mask-direction: bottom;
-}
-
-.bottom-scroll-mask {
-    width: 100%;
-    height: 0;
-    top: 100%;
-    right: 0;
-    bottom: 0;
-    left: 0;
-}
-
-.bottom-scroll-mask-content {
-    width: 100%;
-    height: var(--scroll-mask-size, 8px);
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    --scroll-mask-direction: top;
-}
-
-.left-scroll-mask {
-    width: 0;
-    height: 100%;
-    top: 0;
-    right: 100%;
-    bottom: 0;
-    left: 0;
-}
-
-.left-scroll-mask-content {
-    width: var(--scroll-mask-size, 8px);
-    height: 100%;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    --scroll-mask-direction: right;
-}
-
-.right-scroll-mask {
-    width: 0;
-    height: 100%;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 100%;
-}
-
-.right-scroll-mask-content {
-    width: var(--scroll-mask-size, 8px);
-    height: 100%;
-    right: 0;
-    bottom: 50%;
-    transform: translateY(50%);
-    --scroll-mask-direction: left;
-}
+.scroll-mask {
+    position: sticky;
+    z-index: 10;
+    pointer-events: none;
+}
+
+.top-scroll-mask {
+    width: 100%;
+    height: 0;
+    top: 0;
+    right: 0;
+    bottom: 100%;
+    left: 0;
+}
+
+.scroll-mask-content {
+    position: absolute;
+    background-image: linear-gradient(
+        to var(--scroll-mask-direction),
+        var(--scroll-mask-color-from, rgba(0, 0, 0, 0.1)),
+        var(--scroll-mask-color-to, rgba(0, 0, 0, 0))
+    );
+    clip-path: var(--scroll-mask-clip-path, none);
+}
+
+.top-scroll-mask-content {
+    width: 100%;
+    height: var(--scroll-mask-size, 8px);
+    top: 0;
+    right: 50%;
+    transform: translateX(50%);
+    --scroll-mask-direction: bottom;
+}
+
+.bottom-scroll-mask {
+    width: 100%;
+    height: 0;
+    top: 100%;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.bottom-scroll-mask-content {
+    width: 100%;
+    height: var(--scroll-mask-size, 8px);
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    --scroll-mask-direction: top;
+}
+
+.left-scroll-mask {
+    width: 0;
+    height: 100%;
+    top: 0;
+    right: 100%;
+    bottom: 0;
+    left: 0;
+}
+
+.left-scroll-mask-content {
+    width: var(--scroll-mask-size, 8px);
+    height: 100%;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    --scroll-mask-direction: right;
+}
+
+.right-scroll-mask {
+    width: 0;
+    height: 100%;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 100%;
+}
+
+.right-scroll-mask-content {
+    width: var(--scroll-mask-size, 8px);
+    height: 100%;
+    right: 0;
+    bottom: 50%;
+    transform: translateY(50%);
+    --scroll-mask-direction: left;
+}

package/src/components/WriteExcel.tsx

@@ -1,13 +1,13 @@
-"use client"
-
-import { WriteSheet, WriteSheetProps } from "./WriteSheet"
-
-/**
- * @deprecated 请使用 WriteSheetProps 代替
- */
-export type WriteExcelProps = WriteSheetProps
-
-/**
- * @deprecated 请使用 WriteSheet 代替
- */
-export const WriteExcel = WriteSheet
+"use client"
+
+import { WriteSheet, WriteSheetProps } from "./WriteSheet"
+
+/**
+ * @deprecated 请使用 WriteSheetProps 代替
+ */
+export type WriteExcelProps = WriteSheetProps
+
+/**
+ * @deprecated 请使用 WriteSheet 代替
+ */
+export const WriteExcel = WriteSheet

package/src/utils/getReactVersion.ts

@@ -1,7 +1,7 @@
-import { version } from "react"
-
-const reg = /(\d+)\.(\d+)\.(\d+)/
-
-export function getReactVersion() {
-    return version.match(reg)!.slice(1).map(Number)
-}
+import { version } from "react"
+
+const reg = /(\d+)\.(\d+)\.(\d+)/
+
+export function getReactVersion() {
+    return version.match(reg)!.slice(1).map(Number)
+}

package/src/utils/index.ts

@@ -1,33 +1,33 @@
-import { CSSProperties } from "react"
-
-export type CSSVariableName = `--${string}`
-
-export type CSSVariableValue = string | number | undefined
-
-export interface StyleWithCSSVariable extends CSSProperties {
-    [X: CSSVariableName]: CSSVariableValue
-}
-
-const cssVariableReg = /[A-Z]/
-
-function addCSSVariableLine(match: string): string {
-    return `-${match}`
-}
-
-export function transformCSSVariableName(name: string): CSSVariableName {
-    return `--${name.replace(cssVariableReg, addCSSVariableLine).toLowerCase()}`
-}
-
-export function transformCSSVariable(style: Partial<Record<string, CSSVariableValue>>, style2?: CSSProperties): CSSProperties {
-    return Object.assign(
-        Object.entries(style).reduce((acc: StyleWithCSSVariable, [key, value]) => {
-            acc[transformCSSVariableName(key)] = value
-            return acc
-        }, {}),
-        style2,
-    )
-}
-
-export function px(value: string | number | undefined): string | undefined {
-    return typeof value === "number" ? `${value}px` : value
-}
+import { CSSProperties } from "react"
+
+export type CSSVariableName = `--${string}`
+
+export type CSSVariableValue = string | number | undefined
+
+export interface StyleWithCSSVariable extends CSSProperties {
+    [X: CSSVariableName]: CSSVariableValue
+}
+
+const cssVariableReg = /[A-Z]/
+
+function addCSSVariableLine(match: string): string {
+    return `-${match}`
+}
+
+export function transformCSSVariableName(name: string): CSSVariableName {
+    return `--${name.replace(cssVariableReg, addCSSVariableLine).toLowerCase()}`
+}
+
+export function transformCSSVariable(style: Partial<Record<string, CSSVariableValue>>, style2?: CSSProperties): CSSProperties {
+    return Object.assign(
+        Object.entries(style).reduce((acc: StyleWithCSSVariable, [key, value]) => {
+            acc[transformCSSVariableName(key)] = value
+            return acc
+        }, {}),
+        style2,
+    )
+}
+
+export function px(value: string | number | undefined): string | undefined {
+    return typeof value === "number" ? `${value}px` : value
+}