@antscorp/antsomi-ui 2.0.110 → 2.0.112

package/es/hooks/useEyedropper/eyedropper.js

@@ -0,0 +1,205 @@
+/* eslint-disable no-bitwise */
+import html2canvas from 'html2canvas-pro';
+import { errors, px } from './utils';
+/** Global `isOpen` state */
+const isOpenState = {
+    value: false,
+};
+/**
+ * EyeDropper API polyfill
+ * https://wicg.github.io/eyedropper-api/#dom-colorselectionoptions
+ */
+export class EyeDropperPolyfill {
+    constructor() {
+        this.magnification = {
+            size: 4,
+            scale: 12,
+        };
+        this.onMouseMove = this.onMouseMove.bind(this);
+        this.onClick = this.onClick.bind(this);
+    }
+    /**
+     * Opens the polyfilled eyedropper
+     *
+     * §3.3 EyeDropper interface ► `open()`
+     */
+    async open(options = {}) {
+        // §3.3 EyeDropper interface ► `open()` ► p.2
+        // Prevent opening if already open
+        if (isOpenState.value) {
+            return Promise.reject(new DOMException('Invalid state', 'InvalidStateError'));
+        }
+        // §3.3 EyeDropper interface ► `open()` ► p.3
+        // Create a promise to handle the color selection
+        const result = new Promise((resolve, reject) => {
+            // §3.3 EyeDropper interface ► `open()` ► p.4
+            // Handle possible signal abortion
+            if (options.signal) {
+                if (options.signal.aborted) {
+                    this.stop();
+                    reject(options.signal.reason || new DOMException('Aborted', 'AbortError'));
+                }
+                const abortListener = () => {
+                    this.stop();
+                    if (options.signal) {
+                        reject(options.signal.reason || new DOMException('Aborted', 'AbortError'));
+                    }
+                };
+                options.signal.addEventListener('abort', abortListener);
+            }
+            // §3.3 EyeDropper interface ► `open()` ► p.5
+            // Store the resolve function and start the eyedropper
+            this.resolve = resolve;
+            this.start();
+        });
+        return result;
+    }
+    /**
+     * Starting eyedropper mode
+     */
+    async start() {
+        document.body.style.overflow = 'hidden';
+        this.setWaitingCursor();
+        await this.createScreenshot();
+        this.revertWaitingCursor();
+        this.bindEvents();
+    }
+    /**
+     * Stopping eyedropper mode
+     */
+    stop() {
+        document.body.style.overflow = '';
+        this.unbindEvents();
+        this.removeScreenshot();
+        this.colorSelectionResult = undefined;
+        this.lastPoint = undefined;
+        isOpenState.value = false;
+    }
+    /**
+     * Creates fake screenshot of page and assign it to the body
+     */
+    async createScreenshot() {
+        this.canvas = await html2canvas(document.body, {
+            allowTaint: true,
+            useCORS: true,
+            height: document.body.scrollHeight,
+            width: document.body.scrollWidth,
+        });
+        this.addCanvasStyle(this.canvas);
+        this.canvasCtx = this.canvas.getContext('2d', {
+            willReadFrequently: true,
+        });
+        document.body.appendChild(this.canvas);
+    }
+    /**
+     * Removes screenshot from page
+     */
+    removeScreenshot() {
+        if (!this.canvas) {
+            throw new Error(errors.canvasError);
+        }
+        document.body.removeChild(this.canvas);
+        this.canvas = undefined;
+        this.canvasCtx = undefined;
+    }
+    /**
+     * Sets waiting cursor
+     */
+    setWaitingCursor() {
+        this.previousDocumentCursor = document.documentElement.style.cursor;
+        document.documentElement.style.cursor = 'wait';
+    }
+    /**
+     * Removes waiting cursor
+     */
+    revertWaitingCursor() {
+        if (this.previousDocumentCursor) {
+            document.documentElement.style.cursor = this.previousDocumentCursor;
+        }
+        else {
+            document.documentElement.style.cursor = '';
+        }
+        this.previousDocumentCursor = undefined;
+    }
+    /**
+     * Binds events
+     */
+    bindEvents() {
+        window.addEventListener('mousemove', this.onMouseMove);
+        window.addEventListener('click', this.onClick);
+    }
+    /**
+     * Unbinds `mousemove` events
+     */
+    unbindEvents() {
+        window.removeEventListener('mousemove', this.onMouseMove);
+        window.removeEventListener('click', this.onClick);
+    }
+    /**
+     * `click` handler
+     */
+    onClick() {
+        if (!this.lastPoint) {
+            throw new Error(errors.color);
+        }
+        this.detectColor(this.lastPoint);
+        const newValue = this.colorSelectionResult;
+        this.stop();
+        if (newValue && this.resolve) {
+            this.resolve(newValue);
+        }
+    }
+    /**
+     * `mousemove` handler
+     */
+    onMouseMove(event) {
+        if (!this.canvas || !this.canvasCtx) {
+            throw new Error(errors.canvasError);
+        }
+        const dpr = window.devicePixelRatio;
+        this.lastPoint = {
+            x: (event.clientX + window.scrollX) * dpr,
+            y: (event.clientY + window.scrollY) * dpr,
+        };
+        // Move magnifier
+        // const position = `${this.lastPoint.x / dpr} ${this.lastPoint.y / dpr}px`;
+        const position = [px(this.lastPoint.x / dpr), px(this.lastPoint.y / dpr)].join(' ');
+        Object.assign(this.canvas.style, {
+            opacity: 1,
+            transformOrigin: position,
+            clipPath: `circle(${px(this.magnification.size)} at ${position})`,
+        });
+    }
+    /**
+     * Detects color from canvas data
+     */
+    detectColor(point) {
+        if (!this.canvasCtx) {
+            throw new Error(errors.canvasError);
+        }
+        const pixelData = this.canvasCtx.getImageData(point.x, point.y, 1, 1).data;
+        const red = pixelData[0];
+        const green = pixelData[1];
+        const blue = pixelData[2];
+        const hex = ((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).slice(1);
+        this.colorSelectionResult = {
+            sRGBHex: `#${hex}`,
+        };
+    }
+    /**
+     * Canvas styles creator
+     */
+    addCanvasStyle(canvas) {
+        Object.assign(canvas.style, {
+            position: 'fixed',
+            top: '0px',
+            marginTop: `${-window.scrollY}px`,
+            left: '0px',
+            zIndex: 999999,
+            opacity: 0,
+            transform: `scale(${this.magnification.scale})`,
+            imageRendering: 'pixelated',
+            border: '1px solid #000000',
+        });
+    }
+}

package/es/hooks/useEyedropper/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export { useEyedropper } from './useEyedropper';

package/es/hooks/useEyedropper/index.js

@@ -0,0 +1,7 @@
+import { attachPolyfill } from './attach';
+import { isEyeDropperSupported } from './support';
+if (!isEyeDropperSupported()) {
+    attachPolyfill();
+}
+export * from './types';
+export { useEyedropper } from './useEyedropper';

package/es/hooks/useEyedropper/support.d.ts

@@ -0,0 +1 @@
+export declare function isEyeDropperSupported(): boolean;

package/es/hooks/useEyedropper/support.js

@@ -0,0 +1,3 @@
+export function isEyeDropperSupported() {
+    return 'EyeDropper' in window;
+}

package/es/hooks/useEyedropper/types.d.ts

@@ -0,0 +1,9 @@
+export interface ColorSelectionOptions {
+    signal?: AbortSignal;
+}
+export interface ColorSelectionResult {
+    sRGBHex: string;
+}
+export interface EyeDropper {
+    open(options?: ColorSelectionOptions): Promise<ColorSelectionResult>;
+}

package/es/hooks/useEyedropper/types.js

@@ -0,0 +1 @@
+export {};

package/es/hooks/useEyedropper/useEyedropper.d.ts

@@ -0,0 +1,8 @@
+export interface UseEyedropperResult {
+    pickedColor: string | null;
+    isLoading: boolean;
+    apiSupported: boolean;
+    pickColor: () => Promise<string | null>;
+    copyToClipboard: (color: string) => Promise<boolean>;
+}
+export declare const useEyedropper: (defaultColor?: string) => UseEyedropperResult;

package/es/hooks/useEyedropper/useEyedropper.js

@@ -0,0 +1,50 @@
+import { useState, useCallback } from 'react';
+import { message } from 'antd';
+export const useEyedropper = (defaultColor) => {
+    const [pickedColor, setPickedColor] = useState(defaultColor || null);
+    const [isLoading, setIsLoading] = useState(false);
+    const apiSupported = 'EyeDropper' in window;
+    const pickColor = useCallback(async () => {
+        if (!apiSupported) {
+            message.error('Trình duyệt của bạn không hỗ trợ EyeDropper API.');
+            return null;
+        }
+        setIsLoading(true);
+        try {
+            const eyeDropper = new window.EyeDropper();
+            const { sRGBHex } = await eyeDropper.open();
+            setPickedColor(sRGBHex);
+            return sRGBHex;
+        }
+        catch (e) {
+            if (e instanceof Error && e.name === 'AbortError') {
+                message.info('Người dùng đã hủy chọn màu.');
+            }
+            else if (e instanceof Error) {
+                message.error(`Đã xảy ra lỗi khi chọn màu: ${e.message}`);
+            }
+            return null;
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [apiSupported]);
+    const copyToClipboard = useCallback(async (color) => {
+        try {
+            await navigator.clipboard.writeText(color);
+            message.success(`Đã copy màu ${color} vào clipboard!`);
+            return true;
+        }
+        catch (error) {
+            message.error('Không thể copy màu vào clipboard.');
+            return false;
+        }
+    }, []);
+    return {
+        pickedColor,
+        isLoading,
+        apiSupported,
+        pickColor,
+        copyToClipboard,
+    };
+};

package/es/hooks/useEyedropper/utils.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Errors text
+ */
+export declare const errors: {
+    canvasError: string;
+    color: string;
+};
+/**
+ * Returns px value
+ */
+export declare function px<T extends number>(value: T): `${T}px`;

package/es/hooks/useEyedropper/utils.js

@@ -0,0 +1,17 @@
+const prefix = `[EyeDropper]`;
+/**
+ * Errors text
+ */
+export const errors = {
+    canvasError: `${prefix} Error getting canvas`,
+    color: `${prefix} Cannot get color`,
+};
+/**
+ * Returns px value
+ */
+export function px(value) {
+    if (typeof value !== 'number' || Number.isNaN(value)) {
+        throw new Error();
+    }
+    return `${value}px`;
+}

package/es/hooks/useIsMounted.d.ts

@@ -0,0 +1 @@
+export declare const useIsMounted: () => () => boolean;

package/es/hooks/useIsMounted.js

@@ -0,0 +1,11 @@
+import { useCallback, useEffect, useRef } from 'react';
+export const useIsMounted = () => {
+    const isMountedRef = useRef(false);
+    useEffect(() => {
+        isMountedRef.current = true;
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
+    return useCallback(() => isMountedRef.current, []);
+};

package/es/index.d.ts

@@ -4,7 +4,7 @@ export * from './queries';
 export * from './providers';
 export { ENV } from './config';
 export { QUERY_KEYS, POST_MESSAGE_TYPES, CDP_API, ANTALYSER_API, MEDIA_TEMPLATE_API, } from './constants';
-export { snakeCaseToCamelCase, camelCaseToSnakeCase, getCategoriesFromObjectTemplate, } from './utils';
+export { snakeCaseToCamelCase, camelCaseToSnakeCase, getCategoriesFromObjectTemplate, analyzeFontFamily, getPrimaryFontFamily, isPrimaryFontWebSafe, isWebSafeFont, } from './utils';
 export { translate, translations } from './locales';
 export * from './hooks';
 export { ConfigProvider as AntdConfigProvider } from 'antd';

package/es/index.js

@@ -4,7 +4,7 @@ export * from './queries';
 export * from './providers';
 export { ENV } from './config';
 export { QUERY_KEYS, POST_MESSAGE_TYPES, CDP_API, ANTALYSER_API, MEDIA_TEMPLATE_API, } from './constants';
-export { snakeCaseToCamelCase, camelCaseToSnakeCase, getCategoriesFromObjectTemplate, } from './utils';
+export { snakeCaseToCamelCase, camelCaseToSnakeCase, getCategoriesFromObjectTemplate, analyzeFontFamily, getPrimaryFontFamily, isPrimaryFontWebSafe, isWebSafeFont, } from './utils';
 export { translate, translations } from './locales';
 // Hooks
 export * from './hooks';

package/es/locales/i18n.d.ts

@@ -10966,6 +10966,6 @@ export declare const translationsJson: {
         };
     };
 };
-declare const i18nInstance: import("i18next").i18n;
+declare const i18nInstance: import("node_modules/i18next").i18n;
 export declare const getTranslateMessage: (id: string, defaultMessage?: string, value?: Record<string, unknown>) => string;
 export default i18nInstance;

package/es/types/index.d.ts

@@ -3,6 +3,15 @@ export type THandleErrorPayload = {
     name: string;
     args: Record<string, any>;
 };
+/** Generic data attributes to set on components */
+export type DataAttribute = {
+    /** The key for the attribute */
+    key: `data-${string}`;
+    /** The value */
+    value: string;
+};
+/** An array of data attributes */
+export type DataAttributes = DataAttribute[];
 export type TLocale = 'en' | 'vi';
 export type GenericFunction = (...args: any[]) => any;
 export type TConfigErrorInfo = {

package/es/utils/common.d.ts

@@ -1,3 +1,4 @@
+import { DataAttributes } from '../types';
 /**
  * Function to reorder list
  * @param {Object[]} list - list of item want to reorder
@@ -66,17 +67,14 @@ export declare const searchParamsToObject: (searchParams?: string) => Record<str
 export declare const getShuffleArray: <T>(array: T[]) => T[];
 export declare const snakeCaseToCamelCase: <T = Record<string, any>>(object: Record<string, any> | Record<string, any>[], recursive?: boolean) => T;
 export declare const camelCaseToSnakeCase: <T = Record<string, any>>(object: Record<string, any>, recursive?: boolean) => T;
-export declare function generateKey(): any;
+export declare function generateKey(): string;
 export declare const formatUserId: (userId?: number) => string;
 /**
- * Function to remove accent
- * @param str - String want to remove accent
- * @returns {string} - Result after remove accent
- */
-export declare const removeAccent: (str: string) => string;
-/** Remove all accents and convert string to lower case, remove leading and trailing white space */
-export declare const simplifyString: (str: string) => string;
-/**
+ * Checks string matching based on a query, supporting fuzzy matching,
+ * where the query characters must appear in order within the target string.
+ * Allows for missing characters in the query relative to the target,
+ * and ignores case, diacritics, and spaces.
+ *
  * @param str target string
  * @param queryStr search query
  * @returns true if target string includes search query
@@ -165,5 +163,13 @@ export declare const convertNumberByDisplayFormat: (value: number | string, grou
 export declare function numberWithCommas(n: number): string;
 export declare const multiPercentageValue: (value?: string) => string;
 export declare const antsomiClsx: (componentName: string) => (className: string) => string;
+/**
+ * Take an array of data attribute key/value pairs and return an object which
+ * can be spread into a component's definition
+ *
+ * @param attributes
+ * @returns A spreadable object of data-attributes
+ */
+export declare const dataAttrArrayToObject: (attributes?: DataAttributes) => Record<string, string>;
 export declare function arrayToMapByProperty<T extends object, K extends keyof T>(array: T[], propertyName: K): Map<T[K], T>;
 export declare function compareStrings(a: any, b: any): number;

package/es/utils/common.js

@@ -6,7 +6,7 @@ import uniqid from 'uniqid';
 import { MESSAGES, PORTAL_KEYS } from '@antscorp/antsomi-ui/es/services/constants';
 // Utils
 import { handleError } from './handleError';
-import { keyBy, sortBy } from 'lodash';
+import { kebabCase, keyBy, sortBy, toString } from 'lodash';
 import clsx from 'clsx';
 import { ANTSOMI_COMPONENT_PREFIX_CLS } from '../constants';
 const PATH = 'src/utils/common.ts';
@@ -430,35 +430,57 @@ export function generateKey() {
 }
 export const formatUserId = (userId) => String(userId || '').replace(/(\d{3})(\d{3})(\d{0,})/, `$1-$2-$3`);
 /**
- * Function to remove accent
- * @param str - String want to remove accent
- * @returns {string} - Result after remove accent
+ * Normalizes a string for searching by:
+ * 1. Converting to NFD Unicode form and removing diacritics.
+ * 2. Converting to lowercase.
+ * 3. Removing all whitespace.
+ * @param str The string to normalize.
+ * @returns The normalized string.
  */
-export const removeAccent = (str) => {
-    str = str.replace(/[àáạảãâầấậẩẫăằắặẳẵ]/g, 'a');
-    str = str.replace(/[èéẹẻẽêềếệểễ]/g, 'e');
-    str = str.replace(/[ìíịỉĩ]/g, 'i');
-    str = str.replace(/[òóọỏõôồốộổỗơờớợởỡ]/g, 'o');
-    str = str.replace(/[ùúụủũưừứựửữ]/g, 'u');
-    str = str.replace(/[ỳýỵỷỹ]/g, 'y');
-    str = str.replace(/đ/g, 'd');
-    str = str.replace(/[ÀÁẠẢÃÂẦẤẬẨẪĂẰẮẶẲẴ]/g, 'A');
-    str = str.replace(/[ÈÉẸẺẼÊỀẾỆỂỄ]/g, 'E');
-    str = str.replace(/[ÌÍỊỈĨ]/g, 'I');
-    str = str.replace(/[ÒÓỌỎÕÔỒỐỘỔỖƠỜỚỢỞỠ]/g, 'O');
-    str = str.replace(/Ù|Ú|Ụ|Ủ|Ũ|Ư|Ừ|Ứ|Ự|Ử|Ữ/g, 'U');
-    str = str.replace(/Ỳ|Ý|Ỵ|Ỷ|Ỹ/g, 'Y');
-    str = str.replace(/Đ/g, 'D');
-    return str;
-};
-/** Remove all accents and convert string to lower case, remove leading and trailing white space */
-export const simplifyString = (str) => removeAccent(`${str || ''}`.toLowerCase().trim()) || '';
+function normalizeStringForSearch(str) {
+    const normalizedStr = typeof str !== 'string' ? toString(str) : str;
+    if (!normalizedStr) {
+        return ''; // Handle null, undefined, or empty string inputs
+    }
+    return normalizedStr
+        .normalize('NFD') // Decompose accented characters (e.g., "á" -> "a" + "´")
+        .replace(/[\u0300-\u036f]/g, '') // Remove diacritical marks
+        .toLowerCase() // Convert to lowercase
+        .replace(/\s+/g, ''); // Remove all whitespace
+}
 /**
+ * Checks string matching based on a query, supporting fuzzy matching,
+ * where the query characters must appear in order within the target string.
+ * Allows for missing characters in the query relative to the target,
+ * and ignores case, diacritics, and spaces.
+ *
  * @param str target string
  * @param queryStr search query
  * @returns true if target string includes search query
  */
-export const searchStringQuery = (str, queryStr) => simplifyString(str).includes(simplifyString(queryStr || ''));
+export const searchStringQuery = (str, queryStr) => {
+    const normalizedQuery = normalizeStringForSearch(queryStr);
+    const normalizedItem = normalizeStringForSearch(str);
+    // Optimization: if normalized query is longer than normalized item,
+    // it cannot be a subsequence.
+    if (normalizedQuery.length > normalizedItem.length) {
+        return false;
+    }
+    // Subsequence check:
+    // Iterate through both normalized strings.
+    // If characters match, advance the query pointer.
+    // Always advance the item pointer.
+    let queryIndex = 0;
+    let itemIndex = 0;
+    while (queryIndex < normalizedQuery.length && itemIndex < normalizedItem.length) {
+        if (normalizedQuery[queryIndex] === normalizedItem[itemIndex]) {
+            queryIndex++;
+        }
+        itemIndex++;
+    }
+    // If queryIndex reached the end of normalizedQuery, all its characters were found in order.
+    return queryIndex === normalizedQuery.length;
+};
 /**
  * Checks if any of the provided values match the search value.
  *
@@ -742,6 +764,22 @@ export const antsomiClsx = (componentName) => (className) => {
     });
     return clsx(classNames);
 };
+/**
+ * Take an array of data attribute key/value pairs and return an object which
+ * can be spread into a component's definition
+ *
+ * @param attributes
+ * @returns A spreadable object of data-attributes
+ */
+export const dataAttrArrayToObject = (attributes = []) => attributes.reduce((output, current) => {
+    // Ensure we follow the correct syntax so we will just return the output if not
+    if (!/^data-([a-z]+-)*[a-z]+$/g.test(kebabCase(current.key)))
+        return output;
+    // Assign the key/value pair to the output object
+    output[kebabCase(current.key)] = current.value;
+    // return the object
+    return output;
+}, {});
 export function arrayToMapByProperty(array, propertyName) {
     // Đảm bảo đầu vào là một mảng và không rỗng
     if (!Array.isArray(array) || array.length === 0) {

package/es/utils/index.d.ts

@@ -9,3 +9,4 @@ export * from './actionButtons';
 export * from './dataTable';
 export * from './cookie';
 export * from './attribute';
+export * from './web';

package/es/utils/index.js

@@ -9,3 +9,4 @@ export * from './actionButtons';
 export * from './dataTable';
 export * from './cookie';
 export * from './attribute';
+export * from './web';

package/es/utils/web.d.ts

@@ -1,4 +1,70 @@
 /// <reference types="react" />
+/**
+ * Parses a font family string and extracts individual font names
+ * Handles quoted fonts, fallbacks, and CSS font-family syntax
+ * @param fontFamily - Font family string (e.g., "'Roboto', Arial, sans-serif")
+ * @returns Array of individual font names
+ */
+export declare function parseFontFamily(fontFamily: string): string[];
+/**
+ * Checks if a given font name is considered a web safe font
+ * @param fontName - The font name to check (case insensitive)
+ * @param includeGeneric - Whether to consider generic font families as web safe (default: false)
+ * @returns boolean - True if the font is web safe, false otherwise
+ */
+export declare function isWebSafeFont(fontName: string, includeGeneric?: boolean): boolean;
+/**
+ * Extracts the primary font from a font-family string
+ * @param fontFamily Font family string (may contain fallbacks)
+ * @returns Primary font name
+ */
+export declare function getPrimaryFontFamily(fontFamily: string): string;
+/**
+ * Checks if the first font in a font family string is web safe
+ * @param fontFamily - Font family string
+ * @returns boolean - True if the primary font is web safe
+ */
+export declare function isPrimaryFontWebSafe(fontFamily: string): boolean;
+/**
+ * Checks if a font name is a generic font family (CSS keyword)
+ * @param fontName - The font name to check
+ * @returns boolean - True if it's a generic font family
+ */
+export declare function isGenericFontFamily(fontName: string): boolean;
+/**
+ * Checks if a font family string (with potential fallbacks) contains any web safe fonts
+ * @param fontFamily - Font family string with potential fallbacks (e.g., "'Custom Font', Arial, sans-serif")
+ * @param options - Configuration options
+ * @returns Object with detailed analysis
+ */
+export declare function analyzeFontFamily(fontFamily: string, options?: {
+    includeGenericAsWebSafe?: boolean;
+}): {
+    hasWebSafeFonts: boolean;
+    webSafeFonts: string[];
+    nonWebSafeFonts: string[];
+    genericFonts: string[];
+    allFonts: string[];
+    isFullyWebSafe: boolean;
+    isPrimaryFontWebSafe: boolean;
+};
+/**
+ * Gets all available web safe fonts
+ * @returns Array of web safe font names
+ */
+export declare function getWebSafeFonts(): readonly string[];
+/**
+ * Finds web safe font alternatives for a given font
+ * @param fontName - The font name to find alternatives for
+ * @returns Array of similar web safe fonts
+ */
+export declare function getWebSafeFontAlternatives(fontName: string): string[];
+/**
+ * Creates a font stack with appropriate fallbacks
+ * @param primaryFont Primary font family
+ * @returns Complete font stack string
+ */
+export declare function createFontStack(primaryFont: string): string;
 /**
  * Function to parse search params string to object
  * @param {string} searchParams - search params
@@ -21,3 +87,17 @@ export declare const isLinux: () => boolean;
  * @returns Platform-appropriate modifier key
  */
 export declare const getModifierKey: () => "⌘" | "Ctrl";
+/**
+ * Formats a hotkey string with the appropriate modifier
+ * @param key The key to format
+ * @returns Formatted hotkey string
+ */
+export declare const formatHotkey: (key: string) => string;
+/**
+ * Chuyển đổi giá trị CSS 'px' thành số nguyên.
+ * Ví dụ: "16px" => 16
+ *
+ * @param fontSizeString - Chuỗi kích thước font, ví dụ: "16px".
+ * @returns Số nguyên hoặc null nếu chuỗi không hợp lệ.
+ */
+export declare function convertPxToNumber(fontSizeString: unknown): number | null;