@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
82 lines • 3.32 kB
TypeScript
/**
* @fileoverview Utility functions for color conversion and manipulation.
* Provides hex-to-HSL conversion and color validation for CSS custom properties.
* @module lib/color-conversion-utilities
*/
/**
* Converts a hexadecimal color code to an HSL string for CSS variables.
* The output format matches Tailwind CSS HSL variable format: "h s% l%"
*
* @param hexColor - Hex color code (e.g., "#06b6d4" or "06b6d4")
* @returns HSL values as "h s% l%" string suitable for CSS variables
*
* @example
* ```typescript
* convertHexToHslString("#06b6d4"); // "187 94% 43%"
* convertHexToHslString("#ec4899"); // "330 81% 60%"
* ```
*/
export declare function convertHexToHslString(hexColor: string): string;
/**
* Converts HSL color values to a hexadecimal color string.
*
* @param hue - Hue value (0-360)
* @param saturation - Saturation percentage (0-100)
* @param lightness - Lightness percentage (0-100)
* @returns Hex color code (e.g., "#06b6d4")
*/
export declare function convertHslToHexString(hue: number, saturation: number, lightness: number): string;
/**
* Validates whether a string is a valid 6-digit hexadecimal color code.
*
* @param hexColor - String to validate
* @returns True if valid 6-digit hex color (with or without #)
*
* @example
* ```typescript
* validateHexColorFormat("#06b6d4"); // true
* validateHexColorFormat("06b6d4"); // true
* validateHexColorFormat("#FFF"); // false (3-digit not supported)
* validateHexColorFormat("invalid"); // false
* ```
*/
export declare function validateHexColorFormat(hexColor: string): boolean;
/**
* Generates the complementary (inverse) color for a given hex color.
*
* @param hexColor - Hex color code
* @returns Complementary hex color code
*/
export declare function calculateComplementaryHexColor(hexColor: string): string;
/**
* Adjusts the lightness of a hexadecimal color by a specified amount.
*
* @param hexColor - Hex color code
* @param lightnessAdjustment - Amount to adjust lightness (-100 to 100)
* @returns Adjusted hex color code
*/
export declare function adjustHexColorLightness(hexColor: string, lightnessAdjustment: number): string;
/**
* Parses an HSL CSS variable string into its numeric components.
*
* @param hslString - HSL string in format "h s% l%"
* @returns Object with hue, saturation, lightness values or null if invalid
*/
export declare function parseHslStringToComponents(hslString: string): {
hue: number;
saturation: number;
lightness: number;
} | null;
/** @deprecated Use convertHexToHslString instead */
export declare const hexToHsl: typeof convertHexToHslString;
/** @deprecated Use convertHslToHexString instead */
export declare const hslToHex: typeof convertHslToHexString;
/** @deprecated Use validateHexColorFormat instead */
export declare const isValidHexColor: typeof validateHexColorFormat;
/** @deprecated Use calculateComplementaryHexColor instead */
export declare const getComplementaryColor: typeof calculateComplementaryHexColor;
/** @deprecated Use adjustHexColorLightness instead */
export declare const adjustLightness: typeof adjustHexColorLightness;
/** @deprecated Use parseHslStringToComponents instead */
export declare const parseHslString: typeof parseHslStringToComponents;
//# sourceMappingURL=color-conversion-utilities.d.ts.map