@usertour/helpers 0.0.53 → 0.0.54

package/dist/{chunk-OBKNA55U.js → chunk-G73OLXRF.js}

@@ -1,7 +1,7 @@
 import {
   hexToHSLString,
   hexToRGBStr
-} from "./chunk-VT24VOAZ.js";
+} from "./chunk-XMAPBUWT.js";
 import {
   isUndefined
 } from "./chunk-GFH3VWOC.js";

package/dist/{chunk-VT24VOAZ.js → chunk-XMAPBUWT.js}

@@ -40,9 +40,38 @@ function generateAutoStateColors(baseColor, brandColor, hoverRatio = 0.12, activ
   }
   return { hover, active };
 }
+function generateStateColors(baseColor, brandColor, options = {}) {
+  const {
+    brandHoverRatio = 0.175,
+    brandActiveRatio = 0.14,
+    lightHoverRatio = 0.11,
+    lightActiveRatio = 0.225
+  } = options;
+  const baseLuminance = chroma(baseColor).luminance();
+  const isBaseLight = baseLuminance > 0.8;
+  const isBaseDark = baseLuminance < 0.2;
+  const isBaseBrand = chroma.distance(baseColor, brandColor) < 10;
+  let hover;
+  let active;
+  if (isBaseBrand) {
+    hover = chroma.mix(baseColor, "#ffffff", brandHoverRatio, "rgb").hex();
+    active = chroma.mix(baseColor, "#000000", brandActiveRatio, "rgb").hex();
+  } else if (isBaseLight) {
+    hover = chroma.mix(baseColor, brandColor, lightHoverRatio, "rgb").hex();
+    active = chroma.mix(baseColor, brandColor, lightActiveRatio, "rgb").hex();
+  } else if (isBaseDark) {
+    hover = chroma.mix(baseColor, "#ffffff", brandHoverRatio, "rgb").hex();
+    active = chroma.mix(baseColor, "#000000", brandActiveRatio, "rgb").hex();
+  } else {
+    hover = chroma.mix(baseColor, "#ffffff", brandHoverRatio, "rgb").hex();
+    active = chroma.mix(baseColor, "#000000", brandActiveRatio, "rgb").hex();
+  }
+  return { hover, active };
+}
 
 export {
   hexToHSLString,
   hexToRGBStr,
-  generateAutoStateColors
+  generateAutoStateColors,
+  generateStateColors
 };

package/dist/color.cjs

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var color_exports = {};
 __export(color_exports, {
   generateAutoStateColors: () => generateAutoStateColors,
+  generateStateColors: () => generateStateColors,
   hexToHSLString: () => hexToHSLString,
   hexToRGBStr: () => hexToRGBStr
 });
@@ -76,9 +77,38 @@ function generateAutoStateColors(baseColor, brandColor, hoverRatio = 0.12, activ
   }
   return { hover, active };
 }
+function generateStateColors(baseColor, brandColor, options = {}) {
+  const {
+    brandHoverRatio = 0.175,
+    brandActiveRatio = 0.14,
+    lightHoverRatio = 0.11,
+    lightActiveRatio = 0.225
+  } = options;
+  const baseLuminance = (0, import_chroma_js.default)(baseColor).luminance();
+  const isBaseLight = baseLuminance > 0.8;
+  const isBaseDark = baseLuminance < 0.2;
+  const isBaseBrand = import_chroma_js.default.distance(baseColor, brandColor) < 10;
+  let hover;
+  let active;
+  if (isBaseBrand) {
+    hover = import_chroma_js.default.mix(baseColor, "#ffffff", brandHoverRatio, "rgb").hex();
+    active = import_chroma_js.default.mix(baseColor, "#000000", brandActiveRatio, "rgb").hex();
+  } else if (isBaseLight) {
+    hover = import_chroma_js.default.mix(baseColor, brandColor, lightHoverRatio, "rgb").hex();
+    active = import_chroma_js.default.mix(baseColor, brandColor, lightActiveRatio, "rgb").hex();
+  } else if (isBaseDark) {
+    hover = import_chroma_js.default.mix(baseColor, "#ffffff", brandHoverRatio, "rgb").hex();
+    active = import_chroma_js.default.mix(baseColor, "#000000", brandActiveRatio, "rgb").hex();
+  } else {
+    hover = import_chroma_js.default.mix(baseColor, "#ffffff", brandHoverRatio, "rgb").hex();
+    active = import_chroma_js.default.mix(baseColor, "#000000", brandActiveRatio, "rgb").hex();
+  }
+  return { hover, active };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   generateAutoStateColors,
+  generateStateColors,
   hexToHSLString,
   hexToRGBStr
 });

package/dist/color.d.cts

@@ -20,10 +20,51 @@ declare const hexToRGBStr: (hex: string) => string;
  * @param hoverRatio - Mix ratio for hover state (default 0.15)
  * @param activeDarken - Darken factor for active state (default 0.12)
  * @returns An object with hover and active color hex strings
+ * @deprecated Use generateStateColors instead
  */
 declare function generateAutoStateColors(baseColor: string, brandColor: string, hoverRatio?: number, activeRatio?: number): {
     hover: string;
     active: string;
 };
+/**
+ * Configuration options for state color generation
+ */
+interface StateColorOptions {
+    /** Mix ratio for hover state when base is brand color (default 0.175) */
+    brandHoverRatio?: number;
+    /** Mix ratio for active/click state when base is brand color (default 0.14) */
+    brandActiveRatio?: number;
+    /** Mix ratio for hover state when base is light color (default 0.11) */
+    lightHoverRatio?: number;
+    /** Mix ratio for active/click state when base is light color (default 0.225) */
+    lightActiveRatio?: number;
+}
+/**
+ * Generate hover and active state colors based on base color and brand color.
+ *
+ * Logic:
+ * - Brand color base: hover = tint (mix with white), active = shade (mix with black)
+ * - Light color base (e.g., white): hover/active = mix with brand color
+ * - Dark color base: hover = tint (mix with white), active = shade (mix with black)
+ *
+ * @param baseColor - The base background color
+ * @param brandColor - The brand/primary color
+ * @param options - Optional configuration for mix ratios
+ * @returns Object containing hover and active color hex strings
+ *
+ * @example
+ * // Brand color button
+ * generateStateColors('#2563eb', '#2563eb');
+ * // Returns: { hover: '#4b7eee', active: '#2055c9' }
+ *
+ * @example
+ * // White background content
+ * generateStateColors('#ffffff', '#2563eb');
+ * // Returns: { hover: '#e7eefd', active: '#cedcfb' }
+ */
+declare function generateStateColors(baseColor: string, brandColor: string, options?: StateColorOptions): {
+    hover: string;
+    active: string;
+};
 
-export { generateAutoStateColors, hexToHSLString, hexToRGBStr };
+export { type StateColorOptions, generateAutoStateColors, generateStateColors, hexToHSLString, hexToRGBStr };

package/dist/color.d.ts

@@ -20,10 +20,51 @@ declare const hexToRGBStr: (hex: string) => string;
  * @param hoverRatio - Mix ratio for hover state (default 0.15)
  * @param activeDarken - Darken factor for active state (default 0.12)
  * @returns An object with hover and active color hex strings
+ * @deprecated Use generateStateColors instead
  */
 declare function generateAutoStateColors(baseColor: string, brandColor: string, hoverRatio?: number, activeRatio?: number): {
     hover: string;
     active: string;
 };
+/**
+ * Configuration options for state color generation
+ */
+interface StateColorOptions {
+    /** Mix ratio for hover state when base is brand color (default 0.175) */
+    brandHoverRatio?: number;
+    /** Mix ratio for active/click state when base is brand color (default 0.14) */
+    brandActiveRatio?: number;
+    /** Mix ratio for hover state when base is light color (default 0.11) */
+    lightHoverRatio?: number;
+    /** Mix ratio for active/click state when base is light color (default 0.225) */
+    lightActiveRatio?: number;
+}
+/**
+ * Generate hover and active state colors based on base color and brand color.
+ *
+ * Logic:
+ * - Brand color base: hover = tint (mix with white), active = shade (mix with black)
+ * - Light color base (e.g., white): hover/active = mix with brand color
+ * - Dark color base: hover = tint (mix with white), active = shade (mix with black)
+ *
+ * @param baseColor - The base background color
+ * @param brandColor - The brand/primary color
+ * @param options - Optional configuration for mix ratios
+ * @returns Object containing hover and active color hex strings
+ *
+ * @example
+ * // Brand color button
+ * generateStateColors('#2563eb', '#2563eb');
+ * // Returns: { hover: '#4b7eee', active: '#2055c9' }
+ *
+ * @example
+ * // White background content
+ * generateStateColors('#ffffff', '#2563eb');
+ * // Returns: { hover: '#e7eefd', active: '#cedcfb' }
+ */
+declare function generateStateColors(baseColor: string, brandColor: string, options?: StateColorOptions): {
+    hover: string;
+    active: string;
+};
 
-export { generateAutoStateColors, hexToHSLString, hexToRGBStr };
+export { type StateColorOptions, generateAutoStateColors, generateStateColors, hexToHSLString, hexToRGBStr };

package/dist/color.js

@@ -1,11 +1,13 @@
 import {
   generateAutoStateColors,
+  generateStateColors,
   hexToHSLString,
   hexToRGBStr
-} from "./chunk-VT24VOAZ.js";
+} from "./chunk-XMAPBUWT.js";
 import "./chunk-XEO3YXBM.js";
 export {
   generateAutoStateColors,
+  generateStateColors,
   hexToHSLString,
   hexToRGBStr
 };

package/dist/convert-settings.js

@@ -2,8 +2,8 @@ import {
   convertSettings,
   convertToCssVars,
   mergeThemeDefaultSettings
-} from "./chunk-OBKNA55U.js";
-import "./chunk-VT24VOAZ.js";
+} from "./chunk-G73OLXRF.js";
+import "./chunk-XMAPBUWT.js";
 import "./chunk-GFH3VWOC.js";
 import "./chunk-XEO3YXBM.js";
 export {

package/dist/index.cjs

@@ -74,6 +74,7 @@ __export(src_exports, {
   filterNullAttributes: () => filterNullAttributes,
   formatDate: () => formatDate,
   generateAutoStateColors: () => generateAutoStateColors,
+  generateStateColors: () => generateStateColors,
   generateUniqueCopyName: () => generateUniqueCopyName,
   getAttributeType: () => getAttributeType,
   getAuthToken: () => getAuthToken,
@@ -193,6 +194,34 @@ function generateAutoStateColors(baseColor, brandColor, hoverRatio = 0.12, activ
   }
   return { hover, active };
 }
+function generateStateColors(baseColor, brandColor, options = {}) {
+  const {
+    brandHoverRatio = 0.175,
+    brandActiveRatio = 0.14,
+    lightHoverRatio = 0.11,
+    lightActiveRatio = 0.225
+  } = options;
+  const baseLuminance = (0, import_chroma_js.default)(baseColor).luminance();
+  const isBaseLight = baseLuminance > 0.8;
+  const isBaseDark = baseLuminance < 0.2;
+  const isBaseBrand = import_chroma_js.default.distance(baseColor, brandColor) < 10;
+  let hover;
+  let active;
+  if (isBaseBrand) {
+    hover = import_chroma_js.default.mix(baseColor, "#ffffff", brandHoverRatio, "rgb").hex();
+    active = import_chroma_js.default.mix(baseColor, "#000000", brandActiveRatio, "rgb").hex();
+  } else if (isBaseLight) {
+    hover = import_chroma_js.default.mix(baseColor, brandColor, lightHoverRatio, "rgb").hex();
+    active = import_chroma_js.default.mix(baseColor, brandColor, lightActiveRatio, "rgb").hex();
+  } else if (isBaseDark) {
+    hover = import_chroma_js.default.mix(baseColor, "#ffffff", brandHoverRatio, "rgb").hex();
+    active = import_chroma_js.default.mix(baseColor, "#000000", brandActiveRatio, "rgb").hex();
+  } else {
+    hover = import_chroma_js.default.mix(baseColor, "#ffffff", brandHoverRatio, "rgb").hex();
+    active = import_chroma_js.default.mix(baseColor, "#000000", brandActiveRatio, "rgb").hex();
+  }
+  return { hover, active };
+}
 
 // src/convert-settings.ts
 var import_deepmerge_ts = require("deepmerge-ts");
@@ -1951,6 +1980,7 @@ var duplicateStep = (step) => {
   filterNullAttributes,
   formatDate,
   generateAutoStateColors,
+  generateStateColors,
   generateUniqueCopyName,
   getAttributeType,
   getAuthToken,

package/dist/index.d.cts

@@ -7,7 +7,7 @@ export { isUrl } from './is-url.cjs';
 export { AbortController, ArrayProto, XMLHttpRequest, assignableWindow, document, fetch, location, nativeForEach, nativeIndexOf, navigator, userAgent, window } from './globals.cjs';
 export { buildConfig, defaultContentConfig, extractLinkUrl, isPublishedAtLeastOneEnvironment, isPublishedInAllEnvironments, replaceUserAttr } from './content.cjs';
 export { deepClone, parseUrlParams, wait } from './utils.cjs';
-export { generateAutoStateColors, hexToHSLString, hexToRGBStr } from './color.cjs';
+export { StateColorOptions, generateAutoStateColors, generateStateColors, hexToHSLString, hexToRGBStr } from './color.cjs';
 export { absoluteUrl, cn, cuid, evalCode, formatDate, getRandomColor, hexToRgb, isDark, uuidV4 } from './helper.cjs';
 export { allConditionsHaveIds, assignConditionIds, conditionsIsSame, evaluateRule, evaluateRulesConditions, filterConditionsByType, isConditionsActived, regenerateConditionIds } from './conditions/condition.cjs';
 export { evaluateUrlCondition, isMatchUrlPattern } from './conditions/url.cjs';

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export { isUrl } from './is-url.js';
 export { AbortController, ArrayProto, XMLHttpRequest, assignableWindow, document, fetch, location, nativeForEach, nativeIndexOf, navigator, userAgent, window } from './globals.js';
 export { buildConfig, defaultContentConfig, extractLinkUrl, isPublishedAtLeastOneEnvironment, isPublishedInAllEnvironments, replaceUserAttr } from './content.js';
 export { deepClone, parseUrlParams, wait } from './utils.js';
-export { generateAutoStateColors, hexToHSLString, hexToRGBStr } from './color.js';
+export { StateColorOptions, generateAutoStateColors, generateStateColors, hexToHSLString, hexToRGBStr } from './color.js';
 export { absoluteUrl, cn, cuid, evalCode, formatDate, getRandomColor, hexToRgb, isDark, uuidV4 } from './helper.js';
 export { allConditionsHaveIds, assignConditionIds, conditionsIsSame, evaluateRule, evaluateRulesConditions, filterConditionsByType, isConditionsActived, regenerateConditionIds } from './conditions/condition.js';
 export { evaluateUrlCondition, isMatchUrlPattern } from './conditions/url.js';

package/dist/index.js

@@ -82,12 +82,13 @@ import {
   convertSettings,
   convertToCssVars,
   mergeThemeDefaultSettings
-} from "./chunk-OBKNA55U.js";
+} from "./chunk-G73OLXRF.js";
 import {
   generateAutoStateColors,
+  generateStateColors,
   hexToHSLString,
   hexToRGBStr
-} from "./chunk-VT24VOAZ.js";
+} from "./chunk-XMAPBUWT.js";
 import {
   getCodeError,
   getContentError,
@@ -186,6 +187,7 @@ export {
   filterNullAttributes,
   formatDate,
   generateAutoStateColors,
+  generateStateColors,
   generateUniqueCopyName,
   getAttributeType,
   getAuthToken,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usertour/helpers",
-  "version": "0.0.53",
+  "version": "0.0.54",
   "type": "module",
   "description": "Utility functions and helpers shared across the UserTour project",
   "homepage": "https://www.usertour.io",
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@paralleldrive/cuid2": "^2.2.2",
-    "@usertour/types": "^0.0.40",
+    "@usertour/types": "^0.0.42",
     "chroma-js": "^3.1.2",
     "class-variance-authority": "^0.4.0",
     "clsx": "^1.2.1",