@flikk/ui 1.0.0-beta.1

package/dist/components/forms/ColorPicker/ColorPickerEyeDropper.js

@@ -0,0 +1,50 @@
+import { jsx } from 'react/jsx-runtime';
+import { EyeDropperIcon } from '@heroicons/react/20/solid';
+import { useContext } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { Button } from '../../core/Button/Button.js';
+import { ColorPickerContext } from './ColorPicker.js';
+import { parseColor } from './colorUtils.js';
+
+// Check if browser supports EyeDropper API
+const supportsEyeDropper = typeof window !== 'undefined' && 'EyeDropper' in window;
+/**
+ * ColorPickerEyeDropper - Eyedropper tool to pick colors from screen
+ * Uses browser EyeDropper API (if available)
+ */
+const ColorPickerEyeDropper = ({ className, ...props }) => {
+    const context = useContext(ColorPickerContext);
+    if (!context) {
+        throw new Error('ColorPickerEyeDropper must be used within a ColorPicker');
+    }
+    const { setColor, disabled, theme } = context;
+    const handleEyeDropper = async () => {
+        if (!supportsEyeDropper || disabled)
+            return;
+        try {
+            // @ts-expect-error - EyeDropper API is experimental
+            const eyeDropper = new window.EyeDropper();
+            const result = await eyeDropper.open();
+            if (result === null || result === void 0 ? void 0 : result.sRGBHex) {
+                const parsed = parseColor(result.sRGBHex);
+                if (parsed) {
+                    setColor(parsed);
+                }
+            }
+        }
+        catch (error) {
+            // User cancelled or error occurred
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn('[ColorPicker]: EyeDropper failed:', error);
+            }
+        }
+    };
+    // Don't render if browser doesn't support EyeDropper
+    if (!supportsEyeDropper) {
+        return null;
+    }
+    return (jsx(Button, { size: "sm", variant: "outline", color: "neutral", iconOnly: true, onClick: handleEyeDropper, disabled: disabled, "aria-label": "Pick color from screen", title: "Pick color from screen", className: cn(theme.eyedropperButtonStyle, className), children: jsx(EyeDropperIcon, { className: "size-4" }) }));
+};
+ColorPickerEyeDropper.displayName = 'ColorPickerEyeDropper';
+
+export { ColorPickerEyeDropper };

package/dist/components/forms/ColorPicker/ColorPickerFormatSelector.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ColorPickerFormatSelectorProps } from './ColorPicker.types';
+/**
+ * ColorPickerFormatSelector - Dropdown to select color format (HEX/RGB/HSL)
+ * Uses Flikkui Select component
+ */
+export declare const ColorPickerFormatSelector: React.FC<ColorPickerFormatSelectorProps>;

package/dist/components/forms/ColorPicker/ColorPickerFormatSelector.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { Select } from '../Select/Select.js';
+import '../Select/Select.theme.js';
+import { ColorPickerContext } from './ColorPicker.js';
+
+/**
+ * ColorPickerFormatSelector - Dropdown to select color format (HEX/RGB/HSL)
+ * Uses Flikkui Select component
+ */
+const ColorPickerFormatSelector = ({ className, ...props }) => {
+    const context = useContext(ColorPickerContext);
+    if (!context) {
+        throw new Error('ColorPickerFormatSelector must be used within a ColorPicker');
+    }
+    const { format, setFormat, theme } = context;
+    const options = [
+        { id: 'hex', label: 'HEX', value: 'hex' },
+        { id: 'rgb', label: 'RGB', value: 'rgb' },
+        { id: 'hsl', label: 'HSL', value: 'hsl' },
+    ];
+    return (jsx("div", { className: cn(theme.formatSelectorStyle, className), ...props, children: jsx(Select, { value: format, onChange: (value) => setFormat(value), options: options, size: "sm", "aria-label": "Color format", wrapperClassName: "w-20" }) }));
+};
+ColorPickerFormatSelector.displayName = 'ColorPickerFormatSelector';
+
+export { ColorPickerFormatSelector };

package/dist/components/forms/ColorPicker/ColorPickerInput.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ColorPickerInputProps } from "./ColorPicker.types";
+/**
+ * ColorPickerInput - Manual color value input
+ * Supports hex, rgb, and hsl input based on selected format
+ */
+export declare const ColorPickerInput: React.FC<ColorPickerInputProps>;

package/dist/components/forms/ColorPicker/ColorPickerInput.js

@@ -0,0 +1,97 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useContext, useState } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { Input } from '../Input/Input.js';
+import '../Input/Input.theme.js';
+import { ColorPickerContext } from './ColorPicker.js';
+import { hslToRgb, parseColor } from './colorUtils.js';
+
+/**
+ * ColorPickerInput - Manual color value input
+ * Supports hex, rgb, and hsl input based on selected format
+ */
+const ColorPickerInput = ({ className, ...props }) => {
+    const context = useContext(ColorPickerContext);
+    if (!context) {
+        throw new Error("ColorPickerInput must be used within a ColorPicker");
+    }
+    const { color, setColor, format, theme, getFormattedValue } = context;
+    const [inputValue, setInputValue] = useState(getFormattedValue());
+    const [isInvalid, setIsInvalid] = useState(false);
+    const handleChange = (e) => {
+        const value = e.target.value;
+        setInputValue(value);
+        // Try to parse the color
+        const parsed = parseColor(value);
+        if (parsed) {
+            setColor(parsed);
+            setIsInvalid(false);
+        }
+        else {
+            setIsInvalid(true);
+        }
+    };
+    const handleBlur = () => {
+        // Reset to current valid color if invalid
+        if (isInvalid) {
+            setInputValue(getFormattedValue());
+            setIsInvalid(false);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            e.currentTarget.blur();
+        }
+    };
+    // Render different input types based on format
+    if (format === "hex") {
+        return (jsx("div", { className: cn(theme.inputContainerStyle, className), ...props, children: jsx(Input, { type: "text", size: "sm", value: inputValue, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, state: isInvalid ? "invalid" : "default", placeholder: "#000000", className: "flex-1 text-sm font-mono", "aria-label": "Hex color value" }) }));
+    }
+    if (format === "rgb") {
+        const rgb = hslToRgb(color.h, color.s, color.l);
+        return (jsxs("div", { className: cn(theme.inputContainerStyle, "flex gap-2", className), ...props, children: [jsx(Input, { type: "number", size: "sm", min: 0, max: 255, value: rgb.r, onChange: (e) => {
+                        const newR = parseInt(e.target.value, 10);
+                        if (!isNaN(newR) && newR >= 0 && newR <= 255) {
+                            const parsed = parseColor(`rgb(${newR}, ${rgb.g}, ${rgb.b})`);
+                            if (parsed)
+                                setColor(parsed);
+                        }
+                    }, className: "flex-1 text-sm", "aria-label": "Red", placeholder: "R" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 255, value: rgb.g, onChange: (e) => {
+                        const newG = parseInt(e.target.value, 10);
+                        if (!isNaN(newG) && newG >= 0 && newG <= 255) {
+                            const parsed = parseColor(`rgb(${rgb.r}, ${newG}, ${rgb.b})`);
+                            if (parsed)
+                                setColor(parsed);
+                        }
+                    }, className: "flex-1 text-sm", "aria-label": "Green", placeholder: "G" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 255, value: rgb.b, onChange: (e) => {
+                        const newB = parseInt(e.target.value, 10);
+                        if (!isNaN(newB) && newB >= 0 && newB <= 255) {
+                            const parsed = parseColor(`rgb(${rgb.r}, ${rgb.g}, ${newB})`);
+                            if (parsed)
+                                setColor(parsed);
+                        }
+                    }, className: "flex-1 text-sm", "aria-label": "Blue", placeholder: "B" })] }));
+    }
+    if (format === "hsl") {
+        return (jsxs("div", { className: cn(theme.inputContainerStyle, "flex gap-2", className), ...props, children: [jsx(Input, { type: "number", size: "sm", min: 0, max: 360, value: Math.round(color.h), onChange: (e) => {
+                        const newH = parseInt(e.target.value, 10);
+                        if (!isNaN(newH) && newH >= 0 && newH <= 360) {
+                            setColor({ ...color, h: newH });
+                        }
+                    }, className: "flex-1 text-sm", "aria-label": "Hue", placeholder: "H" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 100, value: Math.round(color.s), onChange: (e) => {
+                        const newS = parseInt(e.target.value, 10);
+                        if (!isNaN(newS) && newS >= 0 && newS <= 100) {
+                            setColor({ ...color, s: newS });
+                        }
+                    }, className: "flex-1 text-sm", "aria-label": "Saturation", placeholder: "S" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 100, value: Math.round(color.l), onChange: (e) => {
+                        const newL = parseInt(e.target.value, 10);
+                        if (!isNaN(newL) && newL >= 0 && newL <= 100) {
+                            setColor({ ...color, l: newL });
+                        }
+                    }, className: "flex-1 text-sm", "aria-label": "Lightness", placeholder: "L" })] }));
+    }
+    return null;
+};
+ColorPickerInput.displayName = "ColorPickerInput";
+
+export { ColorPickerInput };

package/dist/components/forms/ColorPicker/ColorPickerPresets.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ColorPickerPresetsProps } from './ColorPicker.types';
+/**
+ * ColorPickerPresets - Grid of preset color swatches
+ * Allows quick selection from predefined colors
+ */
+export declare const ColorPickerPresets: React.FC<ColorPickerPresetsProps>;

package/dist/components/forms/ColorPicker/ColorPickerPresets.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { ColorPickerContext } from './ColorPicker.js';
+import { parseColor } from './colorUtils.js';
+
+/**
+ * ColorPickerPresets - Grid of preset color swatches
+ * Allows quick selection from predefined colors
+ */
+const ColorPickerPresets = ({ colors: customColors, className, ...props }) => {
+    const context = useContext(ColorPickerContext);
+    if (!context) {
+        throw new Error('ColorPickerPresets must be used within a ColorPicker');
+    }
+    const { setColor, color, theme, presetColors } = context;
+    // Use custom colors if provided, otherwise use context presetColors
+    const colors = customColors || presetColors;
+    // Don't render if no preset colors
+    if (!colors || colors.length === 0) {
+        return null;
+    }
+    const handlePresetClick = (presetColor) => {
+        const parsed = parseColor(presetColor);
+        if (parsed) {
+            setColor(parsed);
+        }
+    };
+    const handleKeyDown = (e, presetColor) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handlePresetClick(presetColor);
+        }
+    };
+    // Check if a preset is currently selected
+    const isSelected = (presetColor) => {
+        const parsed = parseColor(presetColor);
+        if (!parsed)
+            return false;
+        return (Math.abs(parsed.h - color.h) < 1 &&
+            Math.abs(parsed.s - color.s) < 1 &&
+            Math.abs(parsed.l - color.l) < 1);
+    };
+    return (jsx("div", { className: cn(theme.presetGridStyle, className), ...props, children: colors.map((presetColor, index) => {
+            const selected = isSelected(presetColor);
+            return (jsxs("button", { type: "button", role: "button", tabIndex: 0, onClick: () => handlePresetClick(presetColor), onKeyDown: (e) => handleKeyDown(e, presetColor), "data-selected": selected ? '' : undefined, className: cn(theme.presetSwatchStyle), "aria-label": `Select color ${presetColor}`, title: presetColor, children: [jsx("div", { className: "absolute inset-0 rounded", style: {
+                            backgroundImage: 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")',
+                            backgroundSize: '8px 8px',
+                        } }), jsx("div", { className: "absolute inset-0 rounded", style: {
+                            backgroundColor: presetColor,
+                        } })] }, `${presetColor}-${index}`));
+        }) }));
+};
+ColorPickerPresets.displayName = 'ColorPickerPresets';
+
+export { ColorPickerPresets };

package/dist/components/forms/ColorPicker/ColorPickerSliders.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ColorPickerSlidersProps } from './ColorPicker.types';
+/**
+ * ColorPickerSliders - Compact Hue and Alpha sliders
+ * Matches reference design with inline values
+ */
+export declare const ColorPickerSliders: React.FC<ColorPickerSlidersProps>;

package/dist/components/forms/ColorPicker/ColorPickerSliders.js

@@ -0,0 +1,44 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useContext, useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { Slider } from '../Slider/Slider.js';
+import '../Slider/Slider.theme.js';
+import { ColorPickerContext } from './ColorPicker.js';
+import { formatRgb } from './colorUtils.js';
+
+/**
+ * ColorPickerSliders - Compact Hue and Alpha sliders
+ * Matches reference design with inline values
+ */
+const ColorPickerSliders = ({ showLabels = false, className, ...props }) => {
+    const context = useContext(ColorPickerContext);
+    if (!context) {
+        throw new Error('ColorPickerSliders must be used within a ColorPicker');
+    }
+    const { color, setHue, setAlpha, showAlpha, theme } = context;
+    const { h, s, l, a } = color;
+    // Hue gradient (rainbow)
+    const hueGradient = useMemo(() => 'linear-gradient(to right, ' +
+        '#FF0000 0%, #FFFF00 17%, #00FF00 33%, #00FFFF 50%, #0000FF 67%, #FF00FF 83%, #FF0000 100%)', []);
+    // Alpha gradient with checkerboard
+    const alphaGradient = useMemo(() => {
+        return `linear-gradient(to right, ${formatRgb(h, s, l, 0)}, ${formatRgb(h, s, l, 1)})`;
+    }, [h, s, l]);
+    const checkerboardBackground = 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")';
+    return (jsxs("div", { className: cn(theme.sliderContainerStyle, 'space-y-2', className), ...props, children: [jsx(Slider, { min: 0, max: 360, step: 1, value: h, onChange: (value) => setHue(value), "aria-label": "Hue", showValue: false, theme: {
+                    trackStyle: `h-2 rounded-full`,
+                    rangeStyle: 'h-full rounded-full bg-transparent',
+                    thumbStyle: 'size-4 rounded-full border-2 border-white shadow-md',
+                }, style: {
+                    ['--slider-track-bg']: hueGradient,
+                }, className: "[&_.slider-track]:bg-[image:var(--slider-track-bg)]" }), showAlpha && (jsx(Slider, { min: 0, max: 1, step: 0.01, value: a, onChange: (value) => setAlpha(value), "aria-label": "Opacity", showValue: false, theme: {
+                    trackStyle: `h-2 rounded-full`,
+                    rangeStyle: 'h-full rounded-full bg-transparent',
+                    thumbStyle: 'size-4 rounded-full border-2 border-white shadow-md',
+                }, style: {
+                    ['--slider-track-bg']: `${checkerboardBackground}, ${alphaGradient}`,
+                }, className: "[&_.slider-track]:bg-[length:8px_8px,100%] [&_.slider-track]:bg-[image:var(--slider-track-bg)]" }))] }));
+};
+ColorPickerSliders.displayName = 'ColorPickerSliders';
+
+export { ColorPickerSliders };

package/dist/components/forms/ColorPicker/ColorPickerSwatch.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ColorPickerSwatchProps } from './ColorPicker.types';
+/**
+ * ColorPickerSwatch - Visual color preview with optional checkerboard background
+ * Shows the current color with transparency support
+ */
+export declare const ColorPickerSwatch: React.FC<ColorPickerSwatchProps>;

package/dist/components/forms/ColorPicker/ColorPickerSwatch.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { ColorPickerContext } from './ColorPicker.js';
+import { formatRgb, hslToRgb } from './colorUtils.js';
+
+/**
+ * ColorPickerSwatch - Visual color preview with optional checkerboard background
+ * Shows the current color with transparency support
+ */
+const ColorPickerSwatch = ({ size = 'md', showCheckerboard = true, className, ...props }) => {
+    const context = useContext(ColorPickerContext);
+    if (!context) {
+        throw new Error('ColorPickerSwatch must be used within a ColorPicker');
+    }
+    const { color, theme } = context;
+    const { h, s, l, a } = color;
+    // Convert HSL to RGB for display
+    hslToRgb(h, s, l);
+    const rgbaColor = formatRgb(h, s, l, a);
+    // Size variants
+    const sizeClasses = {
+        sm: 'size-5',
+        md: 'size-6',
+        lg: 'size-8',
+    };
+    return (jsxs("div", { className: cn(theme.swatchStyle, sizeClasses[size], className), role: "img", "aria-label": `Color: ${rgbaColor}`, ...props, children: [showCheckerboard && a < 1 && (jsx("div", { className: "absolute inset-0", style: {
+                    backgroundImage: 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")',
+                    backgroundSize: '8px 8px',
+                    backgroundPosition: '0 0',
+                } })), jsx("div", { className: "absolute inset-0", style: {
+                    backgroundColor: rgbaColor,
+                } })] }));
+};
+ColorPickerSwatch.displayName = 'ColorPickerSwatch';
+
+export { ColorPickerSwatch };

package/dist/components/forms/ColorPicker/ColorPickerTrigger.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ColorPickerTriggerProps } from './ColorPicker.types';
+/**
+ * ColorPickerTrigger - Input field with color swatch
+ * Uses standard Input component styling (like Select does)
+ */
+export declare const ColorPickerTrigger: React.FC<ColorPickerTriggerProps>;

package/dist/components/forms/ColorPicker/ColorPickerTrigger.js

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext, useRef, useEffect } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { Input } from '../Input/Input.js';
+import '../Input/Input.theme.js';
+import { ColorPickerContext } from './ColorPicker.js';
+import { ColorPickerSwatch } from './ColorPickerSwatch.js';
+
+/**
+ * ColorPickerTrigger - Input field with color swatch
+ * Uses standard Input component styling (like Select does)
+ */
+const ColorPickerTrigger = ({ className, ...props }) => {
+    const context = useContext(ColorPickerContext);
+    const inputRef = useRef(null);
+    const wrapperRef = useRef(null);
+    if (!context) {
+        throw new Error('ColorPickerTrigger must be used within a ColorPicker');
+    }
+    const { isOpen, setIsOpen, disabled, state, getFormattedValue, triggerRef } = context;
+    // Update triggerRef with the wrapper element for positioning
+    useEffect(() => {
+        if (wrapperRef.current) {
+            triggerRef.current = wrapperRef.current;
+        }
+    }, [triggerRef]);
+    const handleWrapperClick = (e) => {
+        if (!disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            setIsOpen(!isOpen);
+        }
+    };
+    return (jsx("div", { ref: wrapperRef, onClick: handleWrapperClick, className: "relative", children: jsx(Input, { ref: inputRef, value: getFormattedValue(), readOnly: true, disabled: disabled, state: state, contentStart: jsx(ColorPickerSwatch, { size: "sm" }), className: cn('cursor-pointer pointer-events-none', className), "aria-expanded": isOpen, "aria-haspopup": "dialog", ...props }) }));
+};
+ColorPickerTrigger.displayName = 'ColorPickerTrigger';
+
+export { ColorPickerTrigger };

package/dist/components/forms/ColorPicker/colorUtils.d.ts

@@ -0,0 +1,121 @@
+/**
+ * Color utility functions for ColorPicker component
+ * Handles conversion between HEX, RGB, HSL, and HSV color formats
+ */
+export interface RGB {
+    r: number;
+    g: number;
+    b: number;
+}
+export interface RGBA extends RGB {
+    a: number;
+}
+export interface HSL {
+    h: number;
+    s: number;
+    l: number;
+}
+export interface HSLA extends HSL {
+    a: number;
+}
+export interface HSV {
+    h: number;
+    s: number;
+    v: number;
+}
+export interface HSVA extends HSV {
+    a: number;
+}
+/**
+ * Convert HEX color to RGB
+ * @param hex - Hex color string (e.g., "#FF5733" or "FF5733")
+ * @returns RGB object
+ */
+export declare const hexToRgb: (hex: string) => RGB | null;
+/**
+ * Convert RGB to HEX color
+ * @param r - Red (0-255)
+ * @param g - Green (0-255)
+ * @param b - Blue (0-255)
+ * @returns Hex color string with # prefix
+ */
+export declare const rgbToHex: (r: number, g: number, b: number) => string;
+/**
+ * Convert RGB to HSL
+ * @param r - Red (0-255)
+ * @param g - Green (0-255)
+ * @param b - Blue (0-255)
+ * @returns HSL object
+ */
+export declare const rgbToHsl: (r: number, g: number, b: number) => HSL;
+/**
+ * Convert HSL to RGB
+ * @param h - Hue (0-360)
+ * @param s - Saturation (0-100)
+ * @param l - Lightness (0-100)
+ * @returns RGB object
+ */
+export declare const hslToRgb: (h: number, s: number, l: number) => RGB;
+/**
+ * Convert RGB to HSV
+ * @param r - Red (0-255)
+ * @param g - Green (0-255)
+ * @param b - Blue (0-255)
+ * @returns HSV object
+ */
+export declare const rgbToHsv: (r: number, g: number, b: number) => HSV;
+/**
+ * Convert HSV to RGB
+ * @param h - Hue (0-360)
+ * @param s - Saturation (0-100)
+ * @param v - Value (0-100)
+ * @returns RGB object
+ */
+export declare const hsvToRgb: (h: number, s: number, v: number) => RGB;
+/**
+ * Validate hex color format
+ * @param hex - Hex color string
+ * @returns True if valid hex format
+ */
+export declare const validateHex: (hex: string) => boolean;
+/**
+ * Validate RGB color values
+ * @param r - Red (0-255)
+ * @param g - Green (0-255)
+ * @param b - Blue (0-255)
+ * @returns True if all values are valid
+ */
+export declare const validateRgb: (r: number, g: number, b: number) => boolean;
+/**
+ * Parse color string to HSLA
+ * Supports hex, rgb, rgba, hsl, hsla formats
+ * @param value - Color string in various formats
+ * @returns HSLA object or null if invalid
+ */
+export declare const parseColor: (value: string) => HSLA | null;
+/**
+ * Format HSLA to hex string
+ * @param h - Hue (0-360)
+ * @param s - Saturation (0-100)
+ * @param l - Lightness (0-100)
+ * @returns Hex color string
+ */
+export declare const formatHex: (h: number, s: number, l: number) => string;
+/**
+ * Format HSLA to RGB string
+ * @param h - Hue (0-360)
+ * @param s - Saturation (0-100)
+ * @param l - Lightness (0-100)
+ * @param a - Alpha (0-1)
+ * @returns RGB/RGBA string
+ */
+export declare const formatRgb: (h: number, s: number, l: number, a?: number) => string;
+/**
+ * Format HSLA to HSL string
+ * @param h - Hue (0-360)
+ * @param s - Saturation (0-100)
+ * @param l - Lightness (0-100)
+ * @param a - Alpha (0-1)
+ * @returns HSL/HSLA string
+ */
+export declare const formatHsl: (h: number, s: number, l: number, a?: number) => string;