neko-ui 1.0.35 → 1.0.37

package/es/back-top/index.js

@@ -1,8 +1,8 @@
 function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key]}}}return target};return _extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}import React,{memo,useCallback,useEffect,useRef,useState}from"react";import{css,injectGlobal}from"@emotion/css";import{classNames,getMaxZindex,getScrollTop,isEqual,isFunction}from"@moneko/common";import{createPortal}from"react-dom";import prefixCls from"../prefix-cls";const cls={backtop:prefixCls("back-top"),out:prefixCls("back-top-out")};const backTopCss=css`
   :root {
     --back-top-color: #fff;
-    --back-top-bg: var(--text-color-secondary);
-    --back-top-hover-bg: var(--text-color);
+    --back-top-bg: var(--text-secondary, #4e4e4e);
+    --back-top-hover-bg: var(--text-color, rgb(0 0 0 / 65%));
   }
 
   [data-theme='dark'] {

package/es/button/index.d.ts

@@ -1,6 +1,7 @@
 import { type FC, type HTMLAttributes } from 'react';
+import type { ComponentSize } from '../';
 export type ButtonType = 'success' | 'error' | 'primary' | 'warning' | 'default';
-export interface ButtonProps extends HTMLAttributes<HTMLDivElement> {
+export interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
     /** 按钮类型 */
     type?: ButtonType;
     /** 无限动画 */
@@ -13,14 +14,17 @@ export interface ButtonProps extends HTMLAttributes<HTMLDivElement> {
     circle?: boolean;
     /** 虚线按钮 */
     dashed?: boolean;
-    /** 只有文字的按钮 */
-    float?: boolean;
+    /** 扁平按钮 */
+    flat?: boolean;
     /** 禁用按钮 */
     disabled?: boolean;
     /** 块按钮 */
     block?: boolean;
     /** 链接按钮 */
     link?: boolean;
+    /** 危险按钮 */
+    danger?: boolean;
+    size?: ComponentSize;
 }
 declare const Button: FC<ButtonProps>;
 export default Button;

package/es/button/index.js

@@ -1,81 +1,211 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key]}}}return target};return _extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}import React,{useCallback,useRef,useState}from"react";import{css,keyframes}from"@emotion/css";import{classNames,isFunction}from"@moneko/common";const waveEffect=keyframes`0% {
-    opacity: 1;
-    box-shadow: 0 0 0 var(--wave-shadow-color);
+function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_defineProperty(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _objectSpreadProps(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}import{useCallback,useRef,useState,useMemo,createElement}from"react";import{css,injectGlobal}from"@emotion/css";import{classNames,isFunction}from"@moneko/common";import prefixCls from"../prefix-cls";const cls={btn:prefixCls("btn"),label:prefixCls("btn-label"),primary:prefixCls("btn-primary"),warning:prefixCls("btn-warning"),error:prefixCls("btn-error"),danger:prefixCls("btn-danger"),success:prefixCls("btn-success"),infinite:prefixCls("btn-infinite"),block:prefixCls("btn-block"),dashed:prefixCls("btn-dashed"),fill:prefixCls("btn-fill"),circle:prefixCls("btn-circle"),ghost:prefixCls("btn-ghost"),link:prefixCls("btn-link"),flat:prefixCls("btn-flat"),disabled:prefixCls("btn-disabled"),without:prefixCls("btn-without"),default:prefixCls("btn-default"),large:prefixCls("btn-large"),small:prefixCls("btn-small"),normal:prefixCls("btn-normal")};function btnColor(type){let _cls=`.${cls[type]}`,fillCls=`.${cls[type]}.${cls.fill}`;if(type==="error"){_cls=`.${cls[type]},.${cls.danger}`;fillCls=`.${cls[type]}.${cls.fill},.${cls.danger}.${cls.fill}`}return`
+    ${_cls}:not([disabled]) {
+      .${cls.label} {
+        --btn-color: var(--${type}-color);
+      }
+      --btn-border: var(--${type}-color-border);
+      --btn-bg: var(--${type}-color-bg);
+      --btn-hover-color: var(--${type}-color-hover);
+      --btn-active-color: var(--${type}-color-active);
+      --btn-outline-color: var(--${type}-color-outline);
+    }
+    ${fillCls} {
+      --btn-bg: var(--${type}-color);
+      --btn-border: var(--${type}-color);
+      --btn-hover-bg: var(--${type}-color-hover);
+      --btn-active-bg: var(--${type}-color-active);
+    }
+  `}const btnCss=css`
+  :root {
+    --disable-color: rgb(0 0 0 / 25%);
+    --disable-bg: rgb(0 0 0 / 4%);
+    --disable-border: #d9d9d9;
   }
 
-  25% {
-    opacity: 1;
-    box-shadow: 0 0 0 4px var(--wave-shadow-color);
+  [data-theme='dark'] {
+    --disable-color: rgb(255 255 255 / 25%);
+    --disable-bg: rgb(255 255 255 / 8%);
+    --disable-border: #424242;
   }
+  .${cls.label} {
+    display: block;
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--btn-color);
+    transition-property: color;
+  }
+  .${cls.btn},.${cls.label} {
+    transition-timing-function: var(--transition-timing-function);
+    transition-duration: var(--transition-duration);
+  }
+  .${cls.btn} {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid var(--btn-border);
+    border-radius: var(--border-radius);
+    padding: 4px 16px;
+    width: fit-content;
+    min-width: var(--btn-size);
+    height: fit-content;
+    min-height: var(--btn-size);
+    font-size: var(--font-size, 14px);
+    color: var(--btn-color);
+    background-color: var(--btn-bg);
+    outline-offset: 4px;
+    line-height: 1;
+    cursor: pointer;
+    transition-property: color, background-color, border-color, width, height, transform;
+    user-select: none;
+    touch-action: manipulation;
+    box-sizing: border-box;
 
-  100% {
-    opacity: 0;
-    box-shadow: 0 0 0 6px var(--wave-shadow-color);
-  }
-`;const btnTextCss=css`
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;const getAnimationCss=(animating,link,infinite)=>{let animation=css``;if((animating||infinite)&&!link){animation=css`
-      &::before {
-        animation: ${waveEffect} 0.3s cubic-bezier(1, 1, 1, ${infinite?.99:1})
-          ${infinite?"infinite":""} forwards;
-        content: '';
+    &:hover:not([disabled]) {
+      border-color: var(--btn-hover-color);
+      background-color: var(--btn-bg);
+      .${cls.label} {
+        color: var(--btn-hover-color);
+      }
+    }
+
+    &:active:not([disabled]) {
+      border-color: var(--btn-active-color);
+      background-color: var(--btn-bg);
+      transform: scale(0.98);
+      .${cls.label} {
+        color: var(--btn-active-color);
       }
-    `}return animation};const getStatusCss=(type,fill,float,ghost,link,circle,dashed,disabled)=>{let bg="var(--component-background, rgba(255,255,255,0.8))";let hoverBg=bg;let activeBg=bg;let borderColor="var(--border-color-base)";let borderHover=`var(--primary-color-hover, #80b3ff)`;let borderActive=`var(--primary-color-active, #3f72d9)`;let color=`var(--text-color)`;let colorHover=`var(--primary-color-hover, #80b3ff)`;let colorActive=`var(--primary-color-active, #3f72d9)`;if(type!=="default"){bg=`var(--${type}-color${fill?"":"-bg"})`;borderColor=`var(--${type}-color${fill?"":"-border"})`;borderHover=`var(--${type}-color-hover)`;borderActive=`var(--${type}-color-active)`;color=fill?"white":`var(--${type}-color)`;colorHover=fill?"white":`var(--${type}-color-hover)`;colorActive=fill?"white":`var(--${type}-color-active)`;hoverBg=`var(--${type}-color-${fill?"hover":"bg"})`;activeBg=`var(--${type}-color-${fill?"active":"bg"})`}if(ghost||link){bg="transparent";hoverBg="transparent";activeBg="transparent"}if(float||link){borderColor="transparent";borderHover="transparent";borderActive="transparent"}return css`
-    border-style: ${dashed?"dashed":"solid"};
-    border-color: ${borderColor};
-    border-radius: ${circle?"50%":"var(--border-radius-base)"};
-    padding: ${circle?0:"8px 16px"};
-    min-width: ${circle?"32px":"22px"};
-    max-width: ${circle?"32px":"unset"};
-    min-height: ${circle?"32px":"22px"};
-    max-height: ${circle?"32px":"unset"};
-    color: ${color};
-    background-color: ${bg};
-    line-height: ${circle?"32px":1};
-    cursor: ${disabled?"not-allowed":"pointer"};
-    opacity: ${disabled?.7:1};
+    }
+  }
+  .${cls.normal} {
+    --btn-size: 2rem;
+  }
+  .${cls.small} {
+    --btn-size: 1.5rem;
+
+    padding: 0 7px;
+    font-size: var(--font-size-xs, 10px);
+  }
+  .${cls.large} {
+    --btn-size: 2.5rem;
 
-    &:hover {
-      border-color: ${borderHover};
-      color: ${colorHover};
-      background-color: ${hoverBg};
+    font-size: var(--font-size-lg, 16px);
+  }
+  .${cls.link} {
+    .${cls.label} {
+      --btn-color: var(--primary-color);
     }
+  }
+  .${cls.default} {
+    --btn-outline-color: var(--primary-color-outline);
+    --btn-color: var(--text-color);
+    --btn-bg: var(--component-background, #fff);
+    --btn-border: var(--border-color);
+    --btn-hover-color: var(--primary-color-hover);
+    --btn-active-color: var(--primary-color-active);
+  }
+  ${btnColor("primary")}
+  ${btnColor("error")}
+  ${btnColor("success")}
+  ${btnColor("warning")}
+  .${cls.fill} {
+    &:not([disabled]):not(.${cls.default}) {
+      .${cls.label} {
+        color: #fff !important;
+      }
+
+      &:hover {
+        --btn-bg: var(--btn-hover-color) !important;
+      }
 
-    &:active {
-      transform: scale(${disabled?1:.95});
-      border-color: ${borderActive};
-      color: ${colorActive};
-      background-color: ${activeBg};
+      &:active {
+        --btn-bg: var(--btn-active-color) !important;
+      }
+    }
+  }
+  .${cls.fill}.${cls.danger}.${cls.default} {
+    .${cls.label} {
+      color: #fff !important;
     }
-  `};const Button=_param=>{var{infinite,ghost,fill,circle,dashed,float,link,children,disabled,block,onClick,type="default",className}=_param,props=_objectWithoutProperties(_param,["infinite","ghost","fill","circle","dashed","float","link","children","disabled","block","onClick","type","className"]);const ref=useRef(null);const[animating,setAnimating]=useState(false);const getBaseStyle=()=>{return css`
+  }
+  .${cls.dashed} {
+    border-style: dashed;
+  }
+  .${cls.flat}, .${cls.link} {
+    border-color: transparent !important;
+    background-color: transparent;
+  }
+  .${cls.ghost}, .${cls.link} {
+    background-color: transparent !important;
+  }
+  .${cls.btn}.${cls.link} {
+    &::after {
+      content: none;
+    }
+  }
+  .${cls.circle} {
+    border-radius: 50% !important;
+    padding: 0;
+    min-width: var(--btn-size);
+    max-width: var(--btn-size);
+    min-height: var(--btn-size);
+    max-height: var(--btn-size);
+    text-align: center;
+    line-height: var(--btn-size);
+  }
+  .${cls.disabled}[disabled] {
+    --btn-color: var(--disable-color);
+    --btn-bg: var(--disable-bg);
+    --btn-border: var(--disable-border);
+
+    cursor: not-allowed;
+  }
+  .${cls.block} {
+    width: 100%;
+  }
+
+  .${cls.without}, .${cls.infinite} {
+    &:not(.${cls.link}):not(.${cls.flat}) {
       position: relative;
-      display: inline-block;
-      border-width: 1px;
-      width: ${block?"100%":"fit-content"};
-      height: fit-content;
-      text-align: center;
-      outline-offset: 4px;
-      transition-timing-function: var(--transition-timing-function);
-      transition-duration: var(--transition-duration);
-      transition-property: color, background-color, border-color, width, height, transform;
-      user-select: none;
-      touch-action: manipulation;
-      box-sizing: border-box;
 
       &::before {
         position: absolute;
         display: block;
         border-radius: inherit;
         opacity: 0.2;
-        box-shadow: 0 0 0 0 var(--wave-shadow-color);
+        box-shadow: 0 0 0 0 var(--btn-outline-color);
         inset: 0;
+        animation: btn-wave-effect 0.3s cubic-bezier(1, 1, 1, 1);
+        animation-fill-mode: forwards;
+        content: '';
         pointer-events: none;
       }
+    }
+  }
 
-      &:last-of-type {
-        margin-right: 0;
-      }
-    `};const handleClick=useCallback(e=>{if(disabled)return;setAnimating(true);if(isFunction(onClick)){onClick(e)}},[disabled,onClick]);const handleAnimationEnd=useCallback(()=>{setAnimating(false)},[]);return React.createElement("div",_extends({},props,{ref:ref,onClick:handleClick,onAnimationEnd:handleAnimationEnd,className:classNames(getBaseStyle(),getStatusCss(type,fill,float,ghost,link,circle,dashed,disabled),getAnimationCss(animating,link,infinite),className),style:{"--wave-shadow-color":`var(--${type==="default"?"primary":type}-color-outline)`}}),React.createElement("span",{className:btnTextCss},children))};export default Button;
+  .${cls.infinite} {
+    &:not(.${cls.link}):not(.${cls.flat})::before {
+      opacity: 0.2;
+      animation: btn-wave-effect 0.3s cubic-bezier(1, 1, 1, 0.99) infinite;
+    }
+  }
+
+  @keyframes btn-wave-effect {
+    0% {
+      opacity: 1;
+      box-shadow: 0 0 0 var(--btn-outline-color);
+    }
+
+    25% {
+      opacity: 1;
+      box-shadow: 0 0 0 0.25rem var(--btn-outline-color);
+    }
+
+    100% {
+      opacity: 0;
+      box-shadow: 0 0 0 0.375rem var(--btn-outline-color);
+    }
+  }
+`;injectGlobal([btnCss]);const Button=_param=>{var{infinite,ghost,fill,circle,dashed,flat,link,danger,children,disabled,block,onClick,size="normal",type="default",className}=_param,props=_objectWithoutProperties(_param,["infinite","ghost","fill","circle","dashed","flat","link","danger","children","disabled","block","onClick","size","type","className"]);const ref=useRef(null);const[animating,setAnimating]=useState(false);const handleClick=useCallback(e=>{if(disabled)return;setAnimating(true);if(isFunction(onClick)){onClick(e)}},[disabled,onClick]);const handleAnimationEnd=useCallback(()=>{setAnimating(false)},[]);const btnCls=useMemo(()=>classNames(cls.btn,cls[type],cls[size],danger&&cls.danger,block&&cls.block,fill&&cls.fill,circle&&cls.circle,flat&&cls.flat,dashed&&cls.dashed,ghost&&cls.ghost,infinite&&cls.infinite,link&&cls.link,disabled&&cls.disabled,animating&&cls.without,className),[animating,block,circle,className,danger,dashed,disabled,fill,flat,ghost,infinite,link,size,type]);const tag=useMemo(()=>link?"a":"button",[link]);return createElement(tag,_objectSpreadProps(_objectSpread({},props),{ref,onClick:handleClick,onAnimationEnd:handleAnimationEnd,className:btnCls,disabled:disabled}),createElement("span",{className:cls.label},children))};export default Button;

package/es/capture-screen/index.d.ts

@@ -3,6 +3,9 @@ export interface RecorderOptions {
     /** 录制文件名称 */
     filename?: string;
 }
+declare interface MediaRecorderDataAvailableEvent extends Event {
+    data: any;
+}
 export interface CaptureScreenProp extends HTMLAttributes<HTMLDivElement> {
     options?: MediaStreamConstraints;
     /** 是否预览 */

package/es/capture-screen/index.js

@@ -6,8 +6,8 @@ function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var inf
     position: relative;
   }
   .${cls.view} video {
-    border: 1px solid var(--border-color-base);
-    border-radius: var(--border-radius-base);
+    border: var(--border-base);
+    border-radius: var(--border-radius, 8px);
     width: 100%;
     transition: border-color var(--transition-duration) var(--transition-timing-function);
   }
@@ -39,7 +39,7 @@ function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var inf
 
     &::before {
       display: block;
-      border-left: 1px solid var(--border-color-base);
+      border-left: 1px solid var(--border-color, #d9d9d9);
       height: 100%;
       transition: border-color var(--transition-duration) var(--transition-timing-function);
       transform: translateX(-16px);

package/es/color-palette/color.d.ts

@@ -0,0 +1,83 @@
+/**
+ * 将 HSV 光谱转换为 RGB
+ * @param {number} h 色调
+ * @param {number} s 饱和度
+ * @param {number} v 亮度
+ * @returns {number[]} RGB
+ */
+export declare function hsvToRgb(h: number, s: number, v: number): number[];
+/**
+ * 将 HSV 光谱转换为十六进制
+ * @param {number} h 色调
+ * @param {number} s 饱和度
+ * @param {number} v 亮度
+ * @returns {string[]} Hex values
+ */
+export declare function hsvToHex(h: number, s: number, v: number): string[];
+/**
+ * 将 HSV 光谱转换为 CMYK
+ * @param {number} h 色调
+ * @param {number} s 饱和度
+ * @param {number} v 亮度
+ * @returns {number[]} CMYK values
+ */
+export declare function hsvToCmyk(h: number, s: number, v: number): number[];
+/**
+ * 将 HSV 光谱转换为 HSL
+ * @param {number} h 色调
+ * @param {number} s 饱和度
+ * @param {number} v 亮度
+ * @returns {number[]} HSL values
+ */
+export declare function hsvToHsl(h: number, s: number, v: number): number[];
+/**
+ * 将 RGB 转换为 HSV
+ * @param {number} r Red
+ * @param {number} g Green
+ * @param {number} b Blue
+ * @return {number[]} HSV values.
+ */
+export declare function rgbToHsv(r: number, g: number, b: number): number[];
+/**
+ * 将 CMYK 转换为 HSV
+ * @param {number} c Cyan
+ * @param {number} m Magenta
+ * @param {number} y Yellow
+ * @param {number} k Key (Black)
+ * @return {number[]} HSV values.
+ */
+export declare function cmykToHsv(c: number, m: number, y: number, k: number): number[];
+/**
+ * 将 HSL 转换为 HSV
+ * @param {number} h Hue
+ * @param {number} s Saturation
+ * @param {number} l Lightness
+ * @return {number[]} HSV values.
+ */
+export declare function hslToHsv(h: number, s: number, l: number): number[];
+/**
+ * 将 HEX 转换为 HSV
+ * @param {number} hex RGB 颜色的十六进制字符串，长度可以是 3 或 6
+ * @return {number[]} HSV values.
+ */
+export declare function hexToHsv(hex: string): number[];
+declare const colorRegex: {
+    cmyk: RegExp;
+    rgba: RegExp;
+    hsla: RegExp;
+    hsva: RegExp;
+    hexa: RegExp;
+};
+export type ColorType = keyof typeof colorRegex;
+/**
+ * 尝试将表示颜色的字符串解析为 HSV 数组
+ * 当前支持的类型是 cmyk、rgba、hsla 和十六进制
+ * @param {string} str color
+ * @return {*} HSVA
+ */
+export declare function parseToHSVA(str: string): {
+    values: number[];
+    type: ColorType;
+    a: number;
+};
+export {};

package/es/color-palette/color.js

@@ -0,0 +1 @@
+const{min,max,floor,round}=Math;function standardizeColor(name){if(name.toLowerCase()==="black"){return"#000000"}const ctx=document.createElement("canvas").getContext("2d");ctx.fillStyle=name;return ctx.fillStyle==="#000000"?null:ctx.fillStyle}export function hsvToRgb(h,s,v){const _h=h/360*6;const _s=s/100;const _v=v/100;const i=floor(_h);const f=_h-i;const p=_v*(1-_s);const q=_v*(1-f*_s);const t=_v*(1-(1-f)*_s);const mod=i%6;const r=[_v,q,p,p,t,_v][mod];const g=[t,_v,_v,q,p,p][mod];const b=[p,p,t,_v,_v,q][mod];return[r*255,g*255,b*255]}export function hsvToHex(h,s,v){return hsvToRgb(h,s,v).map(e=>round(e).toString(16).padStart(2,"0"))}export function hsvToCmyk(h,s,v){const rgb=hsvToRgb(h,s,v);const r=rgb[0]/255;const g=rgb[1]/255;const b=rgb[2]/255;const k=min(1-r,1-g,1-b);const c=k===1?0:(1-r-k)/(1-k);const m=k===1?0:(1-g-k)/(1-k);const y=k===1?0:(1-b-k)/(1-k);return[c*100,m*100,y*100,k*100]}export function hsvToHsl(h,s,v){let _s=s/100;const _v=v/100;const l=(2-_s)*_v/2;if(l!==0){if(l===1){_s=0}else if(l<.5){_s=_s*_v/(l*2)}else{_s=_s*_v/(2-l*2)}}return[h,_s*100,l*100]}export function rgbToHsv(r,g,b){const _r=r/255,_g=g/255,_b=b/255;let h=0,s;const minVal=min(_r,_g,_b);const maxVal=max(_r,_g,_b);const delta=maxVal-minVal;const v=maxVal;if(delta===0){h=s=0}else{s=delta/maxVal;const dr=((maxVal-_r)/6+delta/2)/delta;const dg=((maxVal-_g)/6+delta/2)/delta;const db=((maxVal-_b)/6+delta/2)/delta;if(_r===maxVal){h=db-dg}else if(_g===maxVal){h=1/3+dr-db}else if(_b===maxVal){h=2/3+dg-dr}if(h<0){h+=1}else if(h>1){h-=1}}return[h*360,s*100,v*100]}export function cmykToHsv(c,m,y,k){const _c=c/100,_m=m/100,_y=y/100,_k=k/100;const r=(1-min(1,_c*(1-_k)+_k))*255;const g=(1-min(1,_m*(1-_k)+_k))*255;const b=(1-min(1,_y*(1-_k)+_k))*255;return[...rgbToHsv(r,g,b)]}export function hslToHsv(h,s,l){const _l=l/100;let _s=s/100;_s*=_l<.5?_l:1-_l;const ns=_l+_s?2*_s/(_l+_s)*100:0;const v=(_l+_s)*100;return[h,ns,v]}export function hexToHsv(hex){var _hex_match;const[r,g,b]=((_hex_match=hex.match(/.{2}/g))===null||_hex_match===void 0?void 0:_hex_match.map(v=>parseInt(v,16)))||[];return rgbToHsv(r,g,b)}const colorRegex={cmyk:/^cmyk[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)/i,rgba:/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i,hsla:/^((hsla)|hsl)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i,hsva:/^((hsva)|hsv)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i,hexa:/^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i};export function parseToHSVA(str){const _str=str.match(/^[a-zA-Z]+$/)?standardizeColor(str):str;const numarize=array=>array.map(v=>/^(|\d+)\.\d+|\d+$/.test(v)?Number(v):undefined);let match;for(const key in colorRegex){if(Object.prototype.hasOwnProperty.call(colorRegex,key)){const type=key;if(!(match=colorRegex[type].exec(_str))){continue}switch(type){case"cmyk":{const[,c=0,m=0,y=0,k=0]=numarize(match);if(c>100||m>100||y>100||k>100)break;return{values:cmykToHsv(c,m,y,k),type,a:1}}case"rgba":{const[,,,r=0,g=0,b=0,a=1]=numarize(match);if(r>255||g>255||b>255||a<0||a>1)break;return{values:[...rgbToHsv(r,g,b),a],a,type}}case"hexa":{let[,hex]=match;if(hex.length===4||hex.length===3){hex=hex.split("").map(v=>v+v).join("")}const raw=hex.substring(0,6),_a=hex.substring(6),a=_a?parseInt(_a,16)/255:1;return{values:[...hexToHsv(raw),a],a,type}}case"hsla":{const[,,,h=0,s=0,l=0,a=1]=numarize(match);if(h>360||s>100||l>100||a<0||a>1)break;return{values:[...hslToHsv(h,s,l),a],a,type}}case"hsva":{const[,,,h=0,s=0,v=0,a=1]=numarize(match);if(h>360||s>100||v>100||a<0||a>1)break;return{values:[h,s,v,a],a,type}}default:{return{values:[0,0,0,1],type:"hsva",a:1}}}}}return{values:[0,0,0,1],type:"hsva",a:1}}

package/es/color-palette/gen-hsva.d.ts

@@ -0,0 +1,23 @@
+interface HSVA {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+    toHSVA(): number[];
+    toHSLA(): number[];
+    toRGBA(): number[];
+    toCMYK(): number[];
+    toHEXA(): string[];
+    clone: () => HSVA;
+}
+export type HSVAVoidName = 'toHSVA' | 'toHSLA' | 'toRGBA' | 'toCMYK' | 'toHEXA';
+/**
+ * 保存颜色表示模型 hsla（色调、饱和度、亮度、alpha）属性的简单类
+ * @param {number} h 色调
+ * @param {number} s 饱和度
+ * @param {number} v 亮度
+ * @param {number} a 透明度
+ * @returns {HSVA} HSVA
+ */
+export declare function genHSVA(h?: number, s?: number, v?: number, a?: number): HSVA;
+export {};

package/es/color-palette/gen-hsva.js

@@ -0,0 +1 @@
+import{hsvToHsl,hsvToRgb,hsvToCmyk,hsvToHex}from"./color";export function genHSVA(h=0,s=0,v=0,a=1){const mapper=(original,next)=>{return (precision=0)=>{return next(~precision?original.map(o=>Number(o.toFixed(precision))):original)}};return{h,s,v,a,toHSVA(){const _hsva=[h,s,v,a];_hsva.toString=mapper(_hsva,arr=>`hsva(${arr[0]}, ${arr[1]}%, ${arr[2]}%, ${a})`);return _hsva},toHSLA(){const hsla=[...hsvToHsl(h,s,v),a];hsla.toString=mapper(hsla,arr=>`hsla(${arr[0]}, ${arr[1]}%, ${arr[2]}%, ${a})`);return hsla},toRGBA(){const rgba=[...hsvToRgb(h,s,v),a];rgba.toString=mapper(rgba,arr=>`rgba(${arr[0]}, ${arr[1]}, ${arr[2]}, ${a})`);return rgba},toCMYK(){const cmyk=hsvToCmyk(h,s,v);cmyk.toString=mapper(cmyk,arr=>`cmyk(${arr[0]}%, ${arr[1]}%, ${arr[2]}%, ${arr[3]}%)`);return cmyk},toHEXA(){const hex=hsvToHex(h,s,v);let alpha="";if(a<1){alpha=Number((a*255).toFixed(0)).toString(16).toUpperCase().padStart(2,"0")}if(alpha){hex.push(alpha)}hex.toString=()=>`#${hex.join("").toUpperCase()}`;return hex},clone:()=>genHSVA(h,s,v,a)}}

package/es/color-palette/index.d.ts

@@ -1,17 +1,21 @@
 import { type FC, type HTMLAttributes } from 'react';
 export declare const cls: {
-    alphaSlider: "n-color-palette-alpha-slider";
-    sliderPicker: "n-color-palette-alpha-picker";
-    palette: "n-color-palette-palette";
-    svpanel: "n-color-palette-svpanel";
-    setting: "n-color-palette-setting";
-    strip: "n-color-palette-strip";
+    palette: "n-color-palette";
+    picker: "n-color-palette-picker";
     preview: "n-color-palette-preview";
     form: "n-color-palette-form";
     input: "n-color-palette-input";
+    switch: "n-color-palette-switch";
+    chooser: "n-color-chooser";
+    range: "n-color-range";
+    hue: "n-color-hue";
+    opacity: "n-color-opacity";
+    color: "n-color-color";
+    slider: "n-color-slider";
 };
 export interface ColorPaletteProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     value?: string;
+    defaultValue?: string;
     onChange?: (color: string) => void;
 }
 declare const ColorPalette: FC<ColorPaletteProps>;