@pixelium/web-vue 0.0.2-fix → 0.0.3-alpha

package/es/share/hook/use-theme-mode.js

@@ -1,45 +1,44 @@
-import { ref, onBeforeUnmount, watch, onScopeDispose } from "vue";
-import { i as inBrowser } from "../util/env.js";
-const apply = (t) => {
-  if (!inBrowser()) {
-    return;
-  }
-  const html = document.documentElement;
-  html.classList.remove("light", "dark");
-  if (t !== "unset") html.classList.add(t);
+import { t as inBrowser } from "../util/env.js";
+import { onBeforeUnmount, onScopeDispose, ref, watch } from "vue";
+var apply = (t) => {
+	if (!inBrowser()) return;
+	const html = document.documentElement;
+	html.classList.remove("light", "dark");
+	if (t !== "unset") html.classList.add(t);
 };
 function useThemeMode(defaultTheme) {
-  const queryDarkMode = ref(false);
-  if (inBrowser()) {
-    let handleDarkModeChange = function(e) {
-      queryDarkMode.value = e.matches;
-    };
-    const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    handleDarkModeChange(darkModeQuery);
-    darkModeQuery.addEventListener("change", handleDarkModeChange);
-    onBeforeUnmount(() => {
-      darkModeQuery.removeEventListener("change", handleDarkModeChange);
-    });
-  }
-  const theme = ref(defaultTheme || queryDarkMode.value ? "dark" : "light");
-  if (defaultTheme) {
-    apply(theme.value);
-  }
-  const toggle = () => {
-    theme.value = theme.value === "unset" ? queryDarkMode.value ? "light" : "dark" : theme.value === "light" ? "dark" : "light";
-  };
-  const clear = () => {
-    theme.value = "unset";
-  };
-  const followMedia = () => {
-    theme.value = queryDarkMode.value ? "dark" : "light";
-  };
-  const stopWatch = watch(theme, apply, { flush: "post" });
-  onScopeDispose(() => {
-    stopWatch();
-  });
-  return [theme, toggle, clear, followMedia];
+	const queryDarkMode = ref(false);
+	if (inBrowser()) {
+		const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+		function handleDarkModeChange(e) {
+			queryDarkMode.value = e.matches;
+		}
+		handleDarkModeChange(darkModeQuery);
+		darkModeQuery.addEventListener("change", handleDarkModeChange);
+		onBeforeUnmount(() => {
+			darkModeQuery.removeEventListener("change", handleDarkModeChange);
+		});
+	}
+	const theme = ref(defaultTheme || queryDarkMode.value ? "dark" : "light");
+	if (defaultTheme) apply(theme.value);
+	const toggle = () => {
+		theme.value = theme.value === "unset" ? queryDarkMode.value ? "light" : "dark" : theme.value === "light" ? "dark" : "light";
+	};
+	const clear = () => {
+		theme.value = "unset";
+	};
+	const followMedia = () => {
+		theme.value = queryDarkMode.value ? "dark" : "light";
+	};
+	const stopWatch = watch(theme, apply, { flush: "post" });
+	onScopeDispose(() => {
+		stopWatch();
+	});
+	return [
+		theme,
+		toggle,
+		clear,
+		followMedia
+	];
 }
-export {
-  useThemeMode as u
-};
+export { useThemeMode as t };

package/es/share/hook/use-transition-end.d.ts

@@ -0,0 +1,2 @@
+import { type Ref } from 'vue';
+export declare function useTransitionEnd(elementRef: Ref<HTMLElement | SVGElement | null>, callback: (event: TransitionEvent) => void): void;

package/es/share/hook/use-transition-end.js

@@ -0,0 +1,12 @@
+import { onMounted, onUnmounted } from "vue";
+function useTransitionEnd(elementRef, callback) {
+	onMounted(() => {
+		if (!elementRef.value) return;
+		elementRef.value.addEventListener("transitionend", callback);
+	});
+	onUnmounted(() => {
+		if (!elementRef.value) return;
+		elementRef.value.removeEventListener("transitionend", callback);
+	});
+}
+export { useTransitionEnd as t };

package/es/share/hook/use-watch-global-css-var.js

@@ -1,19 +1,15 @@
+import { n as inVitest, t as inBrowser } from "../util/env.js";
+import { t as EventBus } from "../util/event-bus.js";
+import { n as GLOBAL_CSS_VAR_CHANGE } from "../const/event-bus-key.js";
 import { onBeforeUnmount } from "vue";
-import { i as inBrowser } from "../util/env.js";
-import { E as EventBus } from "../util/event-bus.js";
-import { a as GLOBAL_CSS_VAR_CHANGE } from "../const/event-bus-key.js";
 const useWatchGlobalCssVal = (callback) => {
-  if (!inBrowser()) {
-    return;
-  }
-  const cb = () => {
-    callback();
-  };
-  EventBus.on(GLOBAL_CSS_VAR_CHANGE, cb);
-  onBeforeUnmount(() => {
-    EventBus.off(GLOBAL_CSS_VAR_CHANGE, cb);
-  });
-};
-export {
-  useWatchGlobalCssVal as u
+	if (!inBrowser() || inVitest()) return;
+	const cb = () => {
+		callback();
+	};
+	EventBus.on(GLOBAL_CSS_VAR_CHANGE, cb);
+	onBeforeUnmount(() => {
+		EventBus.off(GLOBAL_CSS_VAR_CHANGE, cb);
+	});
 };
+export { useWatchGlobalCssVal as t };

package/es/share/hook/use-window-resize-listener.d.ts

@@ -0,0 +1 @@
+export declare const useWindowResizeListener: (callback: (event?: UIEvent) => any, leading?: boolean) => void;

package/es/share/hook/use-window-resize-listener.js

@@ -0,0 +1,15 @@
+import { t as inBrowser } from "../util/env.js";
+import { nextTick, onBeforeUnmount, onMounted } from "vue";
+const useWindowResizeListener = (callback, leading) => {
+	if (!inBrowser()) return;
+	onMounted(() => {
+		nextTick(() => {
+			leading && callback();
+			window.addEventListener("resize", callback);
+		});
+	});
+	onBeforeUnmount(() => {
+		window.removeEventListener("resize", callback);
+	});
+};
+export { useWindowResizeListener as t };

package/es/share/hook/use-z-index.js

@@ -1,32 +1,35 @@
-import { ref, onUnmounted } from "vue";
-const DEFAULT_CONFIG = {
-  message: { start: 3e3 },
-  popup: { start: 1e3 }
+import { onUnmounted, ref } from "vue";
+var DEFAULT_CONFIG = {
+	message: { start: 3e3 },
+	popup: { start: 1e3 }
 };
-const stateMap = {};
+var stateMap = {};
 function ensureNamespace(ns, cfg) {
-  if (!stateMap[ns]) {
-    stateMap[ns] = { max: cfg.start, count: 0, initial: cfg.start };
-  }
-  return stateMap[ns];
+	if (!stateMap[ns]) stateMap[ns] = { initial: cfg.start };
+	return stateMap[ns];
 }
+var usedZIndex = /* @__PURE__ */ new Set();
+var allocate = (ns) => {
+	const nextZIndex = (usedZIndex.size > 0 ? Math.max(...usedZIndex) : ns.initial) + 1;
+	usedZIndex.add(nextZIndex);
+	return nextZIndex;
+};
 function useZIndex(namespace = "popup") {
-  const cfg = DEFAULT_CONFIG[namespace];
-  const ns = ensureNamespace(namespace, cfg);
-  const localZIndex = ref(++ns.max);
-  ns.count++;
-  const next = () => {
-    localZIndex.value = ++ns.max;
-    return localZIndex.value;
-  };
-  const release = () => {
-    if (--ns.count === 0) {
-      ns.max = ns.initial;
-    }
-  };
-  onUnmounted(release);
-  return [localZIndex, next, release];
+	const cfg = DEFAULT_CONFIG[namespace];
+	const ns = ensureNamespace(namespace, cfg);
+	const localZIndex = ref(allocate(ns));
+	const next = () => {
+		localZIndex.value = allocate(ns);
+		return localZIndex.value;
+	};
+	const release = () => {
+		usedZIndex.delete(localZIndex.value);
+	};
+	onUnmounted(release);
+	return [
+		localZIndex,
+		next,
+		release
+	];
 }
-export {
-  useZIndex as u
-};
+export { useZIndex as t };

package/es/share/style/index.css

@@ -0,0 +1,5 @@
+
+.pixelium {
+	font-family: var(--px-font);
+	line-height: var(--px-line-height);
+}

package/es/share/type/index.d.ts

@@ -1,4 +1,4 @@
-import type { VNode } from 'vue';
+import type { DefineComponent, VNode } from 'vue';
 import type { JSX } from 'vue/jsx-runtime';
 import type { GROUP_OPTION_TYPE, SCREEN_SIZE_TYPE } from '../const';
 export type NumberOrPercentage = number | `${number}%`;
@@ -8,8 +8,13 @@ export type RgbaColor = {
     b: number;
     a: number;
 };
-export type ValidContent = string | (() => VNode | string | JSX.Element);
-export type ValidVNodeContent = () => VNode | JSX.Element;
+export type RgbColor = {
+    r: number;
+    g: number;
+    b: number;
+};
+export type ValidContent = string | ((...args: any[]) => VNode | string | JSX.Element);
+export type ValidVNodeContent = (...args: any[]) => VNode | JSX.Element;
 export type ValueWithDeviceWidth<T> = Record<SCREEN_SIZE_TYPE, T>;
 export interface Option<T = any> {
     value: T;
@@ -19,3 +24,13 @@ export interface GroupOption<T = any> {
     children: (Option<T> | string)[];
     type: typeof GROUP_OPTION_TYPE;
 }
+export type LooseRequired<T> = {
+    [P in keyof (T & Required<T>)]: T[P];
+};
+export type RemoveUndefinedFromFields<T, K extends keyof T> = {
+    [P in keyof T]: P extends K ? Exclude<T[P], undefined> : T[P];
+};
+export type VueComponent = DefineComponent<Record<string, never>, Record<string, never>, any>;
+export type EmitEvent<T extends Record<string, any>> = {
+    [K in keyof T as `on${Capitalize<K & string>}`]?: (...args: T[K]) => void;
+};

package/es/share/util/color.d.ts

@@ -1,5 +1,7 @@
-import type { RgbaColor } from '../type';
-export declare function parseColor(color: string): RgbaColor;
-export declare const getGlobalThemeColor: (theme: string, level: number) => RgbaColor;
+import type { RgbaColor, RgbColor } from '../type';
+export declare function parseColor(color: string): RgbaColor | null;
+export declare const getGlobalThemeColor: (theme: string, level: number) => RgbaColor | null;
+export declare const getGlobalThemeColorString: (theme: string, level: number) => string;
 export declare function generatePalette(r: number, g: number, b: number, a?: number, darkMode?: boolean): RgbaColor[];
 export declare const rgbaColor2string: (color: RgbaColor) => string;
+export declare function rgbaEuclideanDistance(color1: RgbaColor, color2: RgbaColor, background?: RgbColor): number;

package/es/share/util/color.js

@@ -1,169 +1,176 @@
-import { T as TRANSPARENT_RGBA_COLOR_OBJECT } from "../const/index.js";
-import { i as inBrowser } from "./env.js";
-import { c as createLRU } from "./lru-cache.js";
-const colorCache = createLRU(120);
+import { l as TRANSPARENT_RGBA_COLOR_OBJECT } from "../const/index.js";
+import { t as inBrowser } from "./env.js";
+import { t as createLRU } from "./lru-cache.js";
+var colorCache = createLRU(120);
 function parseColor(color) {
-  const cached = colorCache.get(color);
-  if (cached) return { ...cached };
-  let result = { r: 0, g: 0, b: 0, a: 255 };
-  if (color.startsWith("rgb(") || color.startsWith("rgba(")) {
-    const matches = color.match(/rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)/i);
-    if (matches) {
-      result.r = parseInt(matches[1], 10);
-      result.g = parseInt(matches[2], 10);
-      result.b = parseInt(matches[3], 10);
-      if (matches[4]) {
-        result.a = Math.round(parseFloat(matches[4]) * 255);
-      }
-    }
-  } else if (color.startsWith("#")) {
-    color = color.slice(1);
-    if (color.length === 3) {
-      result.r = parseInt(color[0] + color[0], 16);
-      result.g = parseInt(color[1] + color[1], 16);
-      result.b = parseInt(color[2] + color[2], 16);
-    } else if (color.length === 4) {
-      result.r = parseInt(color[0] + color[0], 16);
-      result.g = parseInt(color[1] + color[1], 16);
-      result.b = parseInt(color[2] + color[2], 16);
-      result.a = parseInt(color[3] + color[3], 16);
-    } else if (color.length === 6) {
-      result.r = parseInt(color.slice(0, 2), 16);
-      result.g = parseInt(color.slice(2, 4), 16);
-      result.b = parseInt(color.slice(4, 6), 16);
-    } else if (color.length === 8) {
-      result.r = parseInt(color.slice(0, 2), 16);
-      result.g = parseInt(color.slice(2, 4), 16);
-      result.b = parseInt(color.slice(4, 6), 16);
-      result.a = parseInt(color.slice(6, 8), 16);
-    }
-  }
-  colorCache.set(color, result);
-  return { ...result };
+	const cached = colorCache.get(color);
+	if (cached) return { ...cached };
+	if (color.startsWith("rgb(") || color.startsWith("rgba(")) {
+		let result = {
+			r: 0,
+			g: 0,
+			b: 0,
+			a: 255
+		};
+		const matches = color.match(/rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)/i);
+		if (matches) {
+			result.r = parseInt(matches[1], 10);
+			result.g = parseInt(matches[2], 10);
+			result.b = parseInt(matches[3], 10);
+			if (matches[4]) result.a = Math.round(parseFloat(matches[4]) * 255);
+		}
+		colorCache.set(color, result);
+		return { ...result };
+	} else if (color.startsWith("#")) {
+		let result = {
+			r: 0,
+			g: 0,
+			b: 0,
+			a: 255
+		};
+		color = color.slice(1);
+		if (color.length === 3) {
+			result.r = parseInt(color[0] + color[0], 16);
+			result.g = parseInt(color[1] + color[1], 16);
+			result.b = parseInt(color[2] + color[2], 16);
+		} else if (color.length === 4) {
+			result.r = parseInt(color[0] + color[0], 16);
+			result.g = parseInt(color[1] + color[1], 16);
+			result.b = parseInt(color[2] + color[2], 16);
+			result.a = parseInt(color[3] + color[3], 16);
+		} else if (color.length === 6) {
+			result.r = parseInt(color.slice(0, 2), 16);
+			result.g = parseInt(color.slice(2, 4), 16);
+			result.b = parseInt(color.slice(4, 6), 16);
+		} else if (color.length === 8) {
+			result.r = parseInt(color.slice(0, 2), 16);
+			result.g = parseInt(color.slice(2, 4), 16);
+			result.b = parseInt(color.slice(4, 6), 16);
+			result.a = parseInt(color.slice(6, 8), 16);
+		}
+		colorCache.set(color, result);
+		return { ...result };
+	}
+	return null;
 }
 const getGlobalThemeColor = (theme, level) => {
-  if (!inBrowser()) {
-    return TRANSPARENT_RGBA_COLOR_OBJECT;
-  }
-  return parseColor(
-    getComputedStyle(document.documentElement).getPropertyValue(`--px-${theme}-${level}`)
-  );
+	if (!inBrowser()) return TRANSPARENT_RGBA_COLOR_OBJECT;
+	return parseColor(getComputedStyle(document.documentElement).getPropertyValue(`--px-${theme}-${level}`));
+};
+const getGlobalThemeColorString = (theme, level) => {
+	if (!inBrowser()) return "rgba(0,0,0,0)";
+	return getComputedStyle(document.documentElement).getPropertyValue(`--px-${theme}-${level}`);
 };
 function toLinear(c) {
-  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+	return c <= .04045 ? c / 12.92 : Math.pow((c + .055) / 1.055, 2.4);
 }
 function rgbaToOklch(r, g, b, a = 255) {
-  const rn = r / 255;
-  const gn = g / 255;
-  const bn = b / 255;
-  const lr = toLinear(rn);
-  const lg = toLinear(gn);
-  const lb = toLinear(bn);
-  let x = lr * 0.41239079926595934 + lg * 0.357584339383878 + lb * 0.1804807884018343;
-  let y = lr * 0.21263900587151027 + lg * 0.715168678767756 + lb * 0.07219231536073371;
-  let z = lr * 0.01933081871559182 + lg * 0.11919477979462598 + lb * 0.9505321522496607;
-  let l_ = 0.819022437996703 * x + 0.3619062600528904 * y - 0.1288737815209879 * z;
-  let m = 0.0329836539323885 * x + 0.9292868615863434 * y + 0.0361446663506424 * z;
-  let s = 0.0481771893596242 * x + 0.2642395317527308 * y + 0.6335478284694309 * z;
-  l_ = Math.cbrt(l_);
-  m = Math.cbrt(m);
-  s = Math.cbrt(s);
-  const l = 0.210454268309314 * l_ + 0.7936177747023054 * m - 0.0040720430116193 * s;
-  const aLab = 1.9779985324311684 * l_ - 2.42859224204858 * m + 0.450593709617411 * s;
-  const bLab = 0.0259040424655478 * l_ + 0.7827717124575296 * m - 0.8086757549230774 * s;
-  const c = Math.sqrt(aLab * aLab + bLab * bLab);
-  let h = Math.atan2(bLab, aLab) * 180 / Math.PI;
-  if (h < 0) h += 360;
-  return {
-    l,
-    c,
-    h,
-    a
-  };
+	const rn = r / 255;
+	const gn = g / 255;
+	const bn = b / 255;
+	const lr = toLinear(rn);
+	const lg = toLinear(gn);
+	const lb = toLinear(bn);
+	let x = lr * .41239079926595934 + lg * .357584339383878 + lb * .1804807884018343;
+	let y = lr * .21263900587151027 + lg * .715168678767756 + lb * .07219231536073371;
+	let z = lr * .01933081871559182 + lg * .11919477979462598 + lb * .9505321522496607;
+	let l_ = .819022437996703 * x + .3619062600528904 * y - .1288737815209879 * z;
+	let m = .0329836539323885 * x + .9292868615863434 * y + .0361446663506424 * z;
+	let s = .0481771893596242 * x + .2642395317527308 * y + .6335478284694309 * z;
+	l_ = Math.cbrt(l_);
+	m = Math.cbrt(m);
+	s = Math.cbrt(s);
+	const l = .210454268309314 * l_ + .7936177747023054 * m - .0040720430116193 * s;
+	const aLab = 1.9779985324311684 * l_ - 2.42859224204858 * m + .450593709617411 * s;
+	const bLab = .0259040424655478 * l_ + .7827717124575296 * m - .8086757549230774 * s;
+	const c = Math.sqrt(aLab * aLab + bLab * bLab);
+	let h = Math.atan2(bLab, aLab) * 180 / Math.PI;
+	if (h < 0) h += 360;
+	return {
+		l,
+		c,
+		h,
+		a
+	};
 }
 function toGamma(cLin) {
-  return cLin <= 31308e-7 ? 12.92 * cLin : 1.055 * Math.pow(cLin, 1 / 2.4) - 0.055;
+	return cLin <= .0031308 ? 12.92 * cLin : 1.055 * Math.pow(cLin, 1 / 2.4) - .055;
 }
 function oklchToRgba(l, c, h, a = 255) {
-  const hRad = h * Math.PI / 180;
-  const aLab = c * Math.cos(hRad);
-  const bLab = c * Math.sin(hRad);
-  let l_ = l + 0.3963377773761749 * aLab + 0.2158037573099136 * bLab;
-  let m = l - 0.1055613458156586 * aLab - 0.0638541728258133 * bLab;
-  let s = l - 0.0894841775298119 * aLab - 1.2914855480194092 * bLab;
-  l_ = l_ * l_ * l_;
-  m = m * m * m;
-  s = s * s * s;
-  const x = 1.2268798758459243 * l_ - 0.5578149944602171 * m + 0.2813910456659647 * s;
-  const y = -0.0405757452148008 * l_ + 1.112286803280317 * m - 0.0717110580655164 * s;
-  const z = -0.0763729366746601 * l_ - 0.4214933324022432 * m + 1.5869240198367816 * s;
-  const lr = 3.2409699419045226 * x - 1.537383177570094 * y - 0.4986107602930034 * z;
-  const lg = -0.9692436362808796 * x + 1.8759675015077202 * y + 0.04155505740717559 * z;
-  const lb = 0.05563007969699366 * x - 0.20397695888897652 * y + 1.0569715142428786 * z;
-  const r = toGamma(lr);
-  const g = toGamma(lg);
-  const b = toGamma(lb);
-  return {
-    r: Math.round(r * 255),
-    g: Math.round(g * 255),
-    b: Math.round(b * 255),
-    a
-  };
+	const hRad = h * Math.PI / 180;
+	const aLab = c * Math.cos(hRad);
+	const bLab = c * Math.sin(hRad);
+	let l_ = l + .3963377773761749 * aLab + .2158037573099136 * bLab;
+	let m = l - .1055613458156586 * aLab - .0638541728258133 * bLab;
+	let s = l - .0894841775298119 * aLab - 1.2914855480194092 * bLab;
+	l_ = l_ * l_ * l_;
+	m = m * m * m;
+	s = s * s * s;
+	const x = 1.2268798758459243 * l_ - .5578149944602171 * m + .2813910456659647 * s;
+	const y = -.0405757452148008 * l_ + 1.112286803280317 * m - .0717110580655164 * s;
+	const z = -.0763729366746601 * l_ - .4214933324022432 * m + 1.5869240198367816 * s;
+	const lr = 3.2409699419045226 * x - 1.537383177570094 * y - .4986107602930034 * z;
+	const lg = -.9692436362808796 * x + 1.8759675015077202 * y + .04155505740717559 * z;
+	const lb = .05563007969699366 * x - .20397695888897652 * y + 1.0569715142428786 * z;
+	const r = toGamma(lr);
+	const g = toGamma(lg);
+	const b = toGamma(lb);
+	return {
+		r: Math.round(r * 255),
+		g: Math.round(g * 255),
+		b: Math.round(b * 255),
+		a
+	};
 }
 function inGamut(c, l, h) {
-  const { r, g, b } = oklchToRgba(l, c, h);
-  return r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255;
+	const { r, g, b } = oklchToRgba(l, c, h);
+	return r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255;
 }
 function maxChromaForOklch(l, h) {
-  const tol = 1e-6;
-  let lo = 0, hi = 2;
-  while (hi - lo > tol) {
-    const mid = (lo + hi) / 2;
-    if (inGamut(mid, l, h)) lo = mid;
-    else hi = mid;
-  }
-  return lo;
+	const tol = 1e-6;
+	let lo = 0, hi = 2;
+	while (hi - lo > tol) {
+		const mid = (lo + hi) / 2;
+		if (inGamut(mid, l, h)) lo = mid;
+		else hi = mid;
+	}
+	return lo;
 }
-const paletteCache = createLRU(60);
+var paletteCache = createLRU(60);
 function generatePalette(r, g, b, a = 255, darkMode = false) {
-  const key = `${r},${g},${b},${a},${darkMode}`;
-  const cached = paletteCache.get(key);
-  if (cached) return cached;
-  const oklch = rgbaToOklch(r, g, b, a);
-  let palette = [];
-  const minC = oklch.c < 0.049 ? 0 : 0.049;
-  const startL = darkMode ? Math.min(Math.max(oklch.l, 0.05), 0.85) : Math.min(Math.max(oklch.l, 0.15), 0.95);
-  const startC = Math.min(Math.max(oklch.c, minC), maxChromaForOklch(startL, oklch.h));
-  const maxL = Math.min(startL + 0.35, darkMode ? 0.85 : 0.9);
-  const minL = Math.max(startL - 0.35, darkMode ? 0.1 : 0.15);
-  const stepSizeDown4L = darkMode ? (startL - minL) / 4 : (maxL - startL) / 4;
-  const stepSizeDown4C = (startC - minC) / 4;
-  const stepSizeUp4L = darkMode ? (maxL - startL) / 3 : (startL - minL) / 3;
-  const stepSizeUp4C = (startC - minC) / 3;
-  for (let i = 0; i < 5; i++) {
-    const L = startL + (darkMode ? -1 : 1) * stepSizeDown4L * (5 - i);
-    const C = Math.min(startC - stepSizeDown4C * (5 - i), maxChromaForOklch(L, oklch.h));
-    const h = oklch.h;
-    const color = oklchToRgba(L, C, h, a);
-    palette.push(color);
-  }
-  palette.push(oklchToRgba(startL, startC, oklch.h, a));
-  for (let i = 0; i < 4; i++) {
-    const L = startL - (darkMode ? -1 : 1) * stepSizeUp4L * (i + 1);
-    const C = Math.min(startC - stepSizeUp4C * (i + 1), maxChromaForOklch(L, oklch.h));
-    const h = oklch.h;
-    const color = oklchToRgba(L, C, h, a);
-    palette.push(color);
-  }
-  paletteCache.set(key, palette);
-  return palette;
+	const key = `${r},${g},${b},${a},${darkMode}`;
+	const cached = paletteCache.get(key);
+	if (cached) return cached;
+	const oklch = rgbaToOklch(r, g, b, a);
+	let palette = [];
+	const minC = oklch.c < .049 ? 0 : .049;
+	const startL = darkMode ? Math.min(Math.max(oklch.l, .05), .85) : Math.min(Math.max(oklch.l, .15), .95);
+	const startC = Math.min(Math.max(oklch.c, minC), maxChromaForOklch(startL, oklch.h));
+	const maxL = Math.min(startL + .35, darkMode ? .85 : .9);
+	const minL = Math.max(startL - .35, darkMode ? .1 : .15);
+	const stepSizeDown4L = darkMode ? (startL - minL) / 4 : (maxL - startL) / 4;
+	const stepSizeDown4C = (startC - minC) / 4;
+	const stepSizeUp4L = darkMode ? (maxL - startL) / 3 : (startL - minL) / 3;
+	const stepSizeUp4C = (startC - minC) / 3;
+	for (let i = 0; i < 5; i++) {
+		const L = startL + (darkMode ? -1 : 1) * stepSizeDown4L * (5 - i);
+		const C = Math.min(startC - stepSizeDown4C * (5 - i), maxChromaForOklch(L, oklch.h));
+		const h = oklch.h;
+		const color = oklchToRgba(L, C, h, a);
+		palette.push(color);
+	}
+	palette.push(oklchToRgba(startL, startC, oklch.h, a));
+	for (let i = 0; i < 4; i++) {
+		const L = startL - (darkMode ? -1 : 1) * stepSizeUp4L * (i + 1);
+		const C = Math.min(startC - stepSizeUp4C * (i + 1), maxChromaForOklch(L, oklch.h));
+		const h = oklch.h;
+		const color = oklchToRgba(L, C, h, a);
+		palette.push(color);
+	}
+	paletteCache.set(key, palette);
+	return palette;
 }
 const rgbaColor2string = (color) => {
-  return `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a / 255})`;
-};
-export {
-  generatePalette as a,
-  getGlobalThemeColor as g,
-  parseColor as p,
-  rgbaColor2string as r
+	return `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a / 255})`;
 };
+export { rgbaColor2string as a, parseColor as i, getGlobalThemeColor as n, getGlobalThemeColorString as r, generatePalette as t };

package/es/share/util/common.d.ts

@@ -1,5 +1,10 @@
 import type { GroupOption, Option } from '../type';
-export declare const clamp: (x: number, min: number, max: number) => number;
-export declare const fillArr: (val: number, size: number) => any[];
+export declare const fillArr: (val: number, size: number) => number[];
 export declare const defaultFilter: <T extends string | Option | GroupOption>(keyword: string, list?: T[]) => T[];
 export declare const findSameOption: <T extends string | Option | GroupOption>(keyword: string, list: T[], checkLabel?: boolean) => T[];
+export declare function offsetOutward(center: [number, number], points: [number, number][], offset: number): [number, number][];
+export declare function isUrl(url: any, options?: {
+    allowWithoutProtocol?: boolean;
+    allowIpv6?: boolean;
+}): boolean;
+export declare const fixedNumber: (value: number, precision: number) => number;