Utility Functions

/**
 * Converts value to array
 * @param v - Value to convert (can be single value or array)
 * @returns Array containing the value(s)
 */
function toArray<T>(v: T | T[]): T[];

/**
 * Gets the type of a value as string
 * @param val - Value to check
 * @returns Type name as string
 */
function type(val: unknown): string;

/**
 * Type guard for string values
 * @param value - Value to check
 * @returns True if value is string
 */
function isString(value: unknown): value is string;

/**
 * Deep copies an object or value
 * @param source - Source object to copy
 * @returns Deep copied object
 */
function deepCopy<T>(source: T): T;

/**
 * Converts value to specific type
 * @param value - Value to convert
 * @param type - Target type name
 * @returns Converted value
 */
function toType(value: unknown, type: string): any;

import { toArray, type, isString, deepCopy, toType } from "windicss/utils";

// Convert to array
const singleValue = toArray("hello"); // ["hello"]
const multiValue = toArray(["a", "b", "c"]); // ["a", "b", "c"]

// Type checking
console.log(type(123)); // "number"
console.log(type([])); // "array"
console.log(isString("hello")); // true
console.log(isString(123)); // false

// Deep copy objects
const original = { a: { b: { c: 1 } } };
const copied = deepCopy(original);
copied.a.b.c = 2; // original is unchanged

// Type conversion
const numberString = toType("123", "number"); // 123
const booleanString = toType("true", "boolean"); // true

/**
 * Converts camelCase to dash-case
 * @param str - camelCase string
 * @returns dash-case string
 */
function camelToDash(str: string): string;

/**
 * Converts dash-case to camelCase
 * @param str - dash-case string
 * @returns camelCase string
 */
function dashToCamel(str: string): string;

/**
 * Creates hash from string
 * @param str - String to hash
 * @returns Hash string
 */
function hash(str: string): string;

/**
 * Indents code with specified number of tabs
 * @param code - Code to indent
 * @param tab - Number of tabs (default: 1)
 * @returns Indented code
 */
function indent(code: string, tab?: number): string;

/**
 * Wraps code with start and end strings
 * @param code - Code to wrap
 * @param start - Start wrapper
 * @param end - End wrapper
 * @param tab - Indentation level
 * @param minify - Whether to minify
 * @returns Wrapped code
 */
function wrapit(
  code: string,
  start?: string,
  end?: string,
  tab?: number,
  minify?: boolean
): string;

/**
 * Tests if string is whitespace
 * @param str - String to test
 * @returns True if string is whitespace
 */
function isSpace(str: string): boolean;

/**
 * Searches text from specific index
 * @param text - Text to search
 * @param regex - Regular expression
 * @param startIndex - Starting index
 * @returns Match index or -1
 */
function searchFrom(text: string, regex: RegExp, startIndex?: number): number;

/**
 * Searches for non-escaped characters
 * @param text - Text to search
 * @param chars - Characters to find
 * @returns Index of first non-escaped match
 */
function searchNotEscape(text: string, chars?: string | string[]): number;

/**
 * Finds end of CSS property in text
 * @param text - CSS text
 * @param startIndex - Starting index
 * @returns End index of property
 */
function searchPropEnd(text: string, startIndex?: number): number;

import { 
  camelToDash, 
  dashToCamel, 
  hash, 
  indent,
  wrapit,
  isSpace,
  searchFrom 
} from "windicss/utils";

// Case conversion
console.log(camelToDash("backgroundColor")); // "background-color"
console.log(dashToCamel("background-color")); // "backgroundColor"

// Hashing
const hashValue = hash("bg-blue-500"); // "a1b2c3d4"

// Code formatting
const css = ".btn { color: red; }";
const indented = indent(css, 2); // "    .btn { color: red; }"
const wrapped = wrapit(css, "/* Start */\n", "\n/* End */");

// String testing
console.log(isSpace("   ")); // true
console.log(isSpace("text")); // false

// Pattern searching
const cssText = ".class { color: red; background: blue; }";
const colorIndex = searchFrom(cssText, /color/, 0); // finds "color" position

/**
 * Tests if string represents a number
 * @param amount - String to test
 * @param start - Start range for validation
 * @param end - End range for validation
 * @param type - Number type ('int' or 'float')
 * @returns True if string is valid number
 */
function isNumber(
  amount: string,
  start?: number,
  end?: number,
  type?: "int" | "float"
): boolean;

/**
 * Tests if string is fraction format
 * @param amount - String to test
 * @returns True if string is fraction (e.g., "1/2")
 */
function isFraction(amount: string): boolean;

/**
 * Tests if string is valid CSS size value
 * @param amount - String to test
 * @returns True if string has valid size format
 */
function isSize(amount: string): boolean;

/**
 * Rounds number up to specified precision
 * @param num - Number to round
 * @param precision - Decimal precision
 * @returns Rounded number
 */
function roundUp(num: number, precision?: number): number;

/**
 * Converts fraction string to percentage
 * @param amount - Fraction string (e.g., "1/2")
 * @returns Percentage string or undefined
 */
function fracToPercent(amount: string): string | undefined;

/**
 * Negates a numeric value string
 * @param value - Value to negate
 * @returns Negated value string
 */
function negateValue(value: string): string;

/**
 * Increases value preserving units
 * @param target - Target value (number or string with units)
 * @param delta - Amount to increase
 * @returns Increased value with preserved units
 */
function increaseWithUnit(target: string | number, delta: number): string | number;

import { 
  isNumber, 
  isFraction, 
  isSize, 
  roundUp,
  fracToPercent,
  negateValue,
  increaseWithUnit 
} from "windicss/utils";

// Number validation
console.log(isNumber("123")); // true
console.log(isNumber("12.5")); // true
console.log(isNumber("abc")); // false
console.log(isNumber("10", 1, 100, "int")); // true (10 is between 1-100 and integer)

// Fraction validation
console.log(isFraction("1/2")); // true
console.log(isFraction("3/4")); // true
console.log(isFraction("1.5")); // false

// Size validation
console.log(isSize("10px")); // true
console.log(isSize("1.5rem")); // true
console.log(isSize("100%")); // true
console.log(isSize("invalid")); // false

// Number operations
console.log(roundUp(1.234, 2)); // 1.24
console.log(fracToPercent("1/2")); // "50%"
console.log(negateValue("10px")); // "-10px"
console.log(increaseWithUnit("10px", 5)); // "15px"
console.log(increaseWithUnit(10, 5)); // 15

/**
 * Converts hex color to RGB array
 * @param hex - Hex color string (with or without #)
 * @returns RGB array [r, g, b] or undefined if invalid
 */
function hex2RGB(hex: string): number[] | undefined;

/**
 * Converts HSL to RGB
 * @param h - Hue (0-360)
 * @param s - Saturation (0-100)
 * @param l - Lightness (0-100)
 * @returns RGB array [r, g, b]
 */
function hsl2rgb(h: number, s: number, l: number): [number, number, number];

/**
 * Converts HWB to RGB
 * @param h - Hue (0-360)
 * @param w - Whiteness (0-100)
 * @param b - Blackness (0-100)
 * @returns RGB array [r, g, b]
 */
function hwb2rgb(h: number, w: number, b: number): [number, number, number];

/**
 * Converts color string to RGBA object
 * @param color - Color string (hex, rgb, hsl, etc.)
 * @returns Color object or undefined if invalid
 */
function toRGBA(color: string): Color | undefined;

/**
 * Converts color string to RGB array
 * @param color - Color string
 * @returns RGB array or undefined if invalid
 */
function toRGB(color: string): number[] | undefined;

/**
 * Parses color string with opacity
 * @param color_string - Color string potentially with opacity
 * @returns Object with color and opacity strings
 */
function toColor(color_string: string): { color: string; opacity: string };

/**
 * Splits color group into parts
 * @param color - Color string with potential opacity
 * @returns Tuple with color and opacity parts
 */
function splitColorGroup(color: string): [string, string | undefined];

/**
 * Flattens nested color object
 * @param colors - Nested color object
 * @param head - Prefix for flattened keys
 * @returns Flattened color object
 */
function flatColors(
  colors: Record<string, any>,
  head?: string
): Record<string, string>;

interface Color {
  r: number;
  g: number;
  b: number;
  a?: number;
}

import { 
  hex2RGB, 
  hsl2rgb, 
  toRGBA, 
  toRGB,
  toColor,
  splitColorGroup,
  flatColors 
} from "windicss/utils";

// Color conversions
console.log(hex2RGB("#3b82f6")); // [59, 130, 246]
console.log(hex2RGB("3b82f6")); // [59, 130, 246] (works without #)
console.log(hsl2rgb(220, 92, 50)); // [10, 132, 245]

// Color parsing
const rgba = toRGBA("rgba(59, 130, 246, 0.5)");
console.log(rgba); // { r: 59, g: 130, b: 246, a: 0.5 }

const rgb = toRGB("rgb(59, 130, 246)");
console.log(rgb); // [59, 130, 246]

// Color with opacity
const parsed = toColor("blue-500/50");
console.log(parsed); // { color: "blue-500", opacity: "50" }

const [color, opacity] = splitColorGroup("red-500/25");
console.log(color); // "red-500"
console.log(opacity); // "25"

// Flatten color object
const colors = {
  blue: {
    500: "#3b82f6",
    600: "#2563eb"
  },
  red: {
    500: "#ef4444"
  }
};
const flattened = flatColors(colors);
console.log(flattened); // { "blue-500": "#3b82f6", "blue-600": "#2563eb", "red-500": "#ef4444" }

/**
 * Gets nested value from object by path
 * @param obj - Source object
 * @param key - Dot-separated path to value
 * @returns Value at path or undefined
 */
function getNestedValue(obj: Record<string, any>, key: string): any;

/**
 * Connects two arrays with options
 * @param a - First array
 * @param b - Second array
 * @param append - Whether to append or prepend
 * @returns Connected array
 */
function connectList<T>(a?: T[], b?: T[], append?: boolean): T[];

/**
 * Tests if string is HTML tag name
 * @param name - String to test
 * @returns True if string is valid HTML tag
 */
function isTagName(name: string): boolean;

/**
 * Tests text against array of regex patterns
 * @param text - Text to test
 * @param expressions - Array of regular expressions
 * @returns True if any regex matches
 */
function testRegexr(text: string, expressions: RegExp[]): boolean;

/**
 * Splits CSS selector string into individual selectors
 * @param selectors - Selector string
 * @returns Array of individual selectors
 */
function splitSelectors(selectors: string): string[];

/**
 * Extracts class information from CSS selector
 * @param selector - CSS selector
 * @returns Class information object or array
 */
function guessClassName(selector: string): any;

import { 
  getNestedValue, 
  connectList, 
  isTagName,
  testRegexr,
  splitSelectors,
  guessClassName 
} from "windicss/utils";

// Nested object access
const config = {
  theme: {
    colors: {
      blue: {
        500: "#3b82f6"
      }
    }
  }
};
const blueColor = getNestedValue(config, "theme.colors.blue.500");
console.log(blueColor); // "#3b82f6"

// Array operations
const combined = connectList(["a", "b"], ["c", "d"], true);
console.log(combined); // ["a", "b", "c", "d"]

// Validation
console.log(isTagName("div")); // true
console.log(isTagName("custom-element")); // false

// Pattern testing
const patterns = [/^bg-/, /^text-/, /^p-/];
console.log(testRegexr("bg-blue-500", patterns)); // true
console.log(testRegexr("invalid-class", patterns)); // false

// CSS processing
const multiSelector = ".btn, .button, input[type='button']";
const selectors = splitSelectors(multiSelector);
console.log(selectors); // [".btn", ".button", "input[type='button']"]

const classInfo = guessClassName(".hover\\:bg-blue-500");
console.log(classInfo); // Information about the class structure

/**
 * Creates negative scale from positive scale
 * @param scale - Object with positive values
 * @returns Object with negative values added
 */
function negative(scale: Record<string, string>): Record<string, string>;

/**
 * Creates breakpoint utilities from screen configuration
 * @param screens - Screen breakpoint configuration
 * @returns Breakpoint utilities object
 */
function breakpoints(screens: Record<string, string>): Record<string, string>;

/**
 * Generates CSS properties for font size configuration
 * @param font - Font size configuration
 * @returns Array of CSS properties
 */
function generateFontSize(font: FontSize): Property[];

/**
 * Expands directional mapping to all directions
 * @param mapping - Base mapping object
 * @param directions - Array of direction suffixes
 * @param prefix - Optional prefix for keys
 * @returns Expanded mapping with all directions
 */
function expandDirection(
  mapping: Record<string, string>,
  directions: string[],
  prefix?: string
): Record<string, string>;

type FontSize =
  | string
  | [fontSize: string, letterSpacing?: string]
  | [fontSize?: string, options?: { letterSpacing?: string; lineHeight?: string }];

import { 
  negative, 
  breakpoints, 
  generateFontSize,
  expandDirection 
} from "windicss/utils";

// Generate negative scale
const spacing = { "1": "0.25rem", "2": "0.5rem", "4": "1rem" };
const withNegative = negative(spacing);
console.log(withNegative);
// { "1": "0.25rem", "2": "0.5rem", "4": "1rem", "-1": "-0.25rem", "-2": "-0.5rem", "-4": "-1rem" }

// Generate breakpoint utilities
const screens = { sm: "640px", md: "768px", lg: "1024px" };
const breakpointUtils = breakpoints(screens);
console.log(breakpointUtils);
// Utilities for responsive design

// Generate font size properties
const fontSize = generateFontSize("1.5rem");
console.log(fontSize); // Array of Property objects for font-size

const fontSizeWithOptions = generateFontSize([
  "1.5rem", 
  { lineHeight: "2rem", letterSpacing: "0.05em" }
]);

// Expand directional utilities
const borderMapping = { "": "1px" };
const directions = ["t", "r", "b", "l", "x", "y"];
const expanded = expandDirection(borderMapping, directions, "border");
console.log(expanded);
// { "border": "1px", "border-t": "1px", "border-r": "1px", ... }

/**
 * Console class with enhanced logging capabilities
 */
class Console {
  log(...args: any[]): void;
  warn(...args: any[]): void;
  error(...args: any[]): void;
  info(...args: any[]): void;
  debug(...args: any[]): void;
}

/**
 * Indents code string with specified tab size
 * @param code - Code string to indent
 * @param tab - Number of spaces for indentation (default: 2)
 * @returns Indented code string
 */
function indent(code: string, tab?: number): string;

/**
 * Wraps code with start/end markers with proper formatting
 * @param code - Code to wrap
 * @param start - Start wrapper
 * @param end - End wrapper  
 * @param tab - Indentation level
 * @param minify - Whether to minify output
 * @returns Wrapped code string
 */
function wrapit(
  code: string, 
  start?: string, 
  end?: string, 
  tab?: number, 
  minify?: boolean
): string;

/**
 * Rounds number up to specified precision
 * @param num - Number to round
 * @param precision - Decimal precision (default: 2)
 * @returns Rounded number
 */
function roundUp(num: number, precision?: number): number;

/**
 * Tests if string contains only whitespace
 * @param str - String to test
 * @returns True if string is only whitespace
 */
function isSpace(str: string): boolean;

/**
 * Tests string against regex or array of regexes
 * @param str - String to test
 * @param regex - Regular expression(s) to test against
 * @returns True if string matches any regex
 */
function testRegexr(str: string, regex: RegExp | RegExp[]): boolean;

/**
 * Infers class name from CSS selector string
 * @param str - CSS selector string
 * @returns Inferred class name information
 */
function guessClassName(str: string): ClassNameGuess | ClassNameGuess[];

interface ClassNameGuess {
  selector: string;
  isClass: boolean;
  pseudo?: string;
}

/**
 * Converts HSL values to RGB
 * @param h - Hue (0-360)
 * @param s - Saturation (0-100)
 * @param l - Lightness (0-100)
 * @returns RGB values as [r, g, b] tuple
 */
function hsl2rgb(h: number, s: number, l: number): [number, number, number];

/**
 * Converts HWB values to RGB
 * @param h - Hue (0-360)
 * @param w - Whiteness (0-100)
 * @param b - Blackness (0-100)
 * @returns RGB values as [r, g, b] tuple
 */
function hwb2rgb(h: number, w: number, b: number): [number, number, number];

import { 
  Console,
  indent,
  wrapit,
  roundUp,
  isSpace,
  testRegexr,
  guessClassName,
  hsl2rgb,
  hwb2rgb 
} from "windicss/utils";

// Enhanced console
const console = new Console();
console.log("Enhanced logging");
console.warn("Warning message");

// Code formatting
const code = "const x = 1;\nconst y = 2;";
const indented = indent(code, 4);
console.log(indented);
// "    const x = 1;\n    const y = 2;"

const wrapped = wrapit(code, "function() {", "}", 2);
console.log(wrapped);
// "function() {\n  const x = 1;\n  const y = 2;\n}"

// Number operations
const rounded = roundUp(3.14159, 2);
console.log(rounded); // 3.14

// String testing
console.log(isSpace("   \n\t  ")); // true
console.log(isSpace("hello")); // false

// Regex testing
const isValid = testRegexr("bg-blue-500", [/^bg-/, /^text-/]);
console.log(isValid); // true

// Class name inference
const classInfo = guessClassName(".hover\\:bg-blue-500\\:focus");
console.log(classInfo);
// { selector: "hover:bg-blue-500:focus", isClass: true, pseudo: ":focus" }

// Color conversions
const rgb1 = hsl2rgb(220, 92, 50);
console.log(rgb1); // [10, 132, 245]

const rgb2 = hwb2rgb(220, 10, 5);
console.log(rgb2); // [25, 132, 242]