Utility Functions

/**
 * Parse color string into structured color data
 * @param body - Color string to be parsed (e.g., 'red-500', 'red-500/20', '[#ff0000]')
 * @param theme - Theme object containing color definitions
 * @param key - Optional theme key to search in (colors, backgroundColor, etc.)
 * @returns Parsed color data or undefined if not parseable
 */
function parseColor(body: string, theme: Theme, key?: ThemeColorKeys): ParsedColorValue | undefined;

interface ParsedColorValue {
  /** Opacity value if specified (e.g., '20' from 'red-500/20') */
  opacity?: string;
  /** Base color name (e.g., 'red' from 'red-500') */
  name: string;
  /** Color scale number (e.g., '500' from 'red-500') */
  no: string;
  /** Resolved color value (e.g., '#ef4444') */
  color?: string;
  /** Parsed CSS color object with RGBA components */
  cssColor?: CSSColorValue;
  /** Processed alpha/opacity value */
  alpha?: string;
}

type ThemeColorKeys = 'colors' | 'borderColor' | 'backgroundColor' | 'textColor' | 'shadowColor' | 'accentColor';

import { parseColor } from "@unocss/preset-mini/utils";
import { theme } from "@unocss/preset-mini/theme";

// Parse theme color
const redColor = parseColor('red-500', theme);
// { opacity: undefined, name: 'red', no: '500', color: '#ef4444', ... }

// Parse color with opacity
const redWithOpacity = parseColor('red-500/20', theme);
// { opacity: '20', name: 'red', no: '500', color: '#ef4444', alpha: '0.2', ... }

// Parse arbitrary color
const customColor = parseColor('[#ff6b35]', theme);
// { opacity: undefined, name: '#ff6b35', color: '#ff6b35', ... }

// Parse hex shorthand
const hexColor = parseColor('hex-ff6b35', theme);
// { opacity: undefined, name: 'hex-ff6b35', color: '#ff6b35', ... }

// Parse CSS variable
const varColor = parseColor('$primary-color', theme);
// { opacity: undefined, name: '$primary-color', color: 'var(--primary-color)', ... }

/** Main value handler function combining all processing capabilities */
const handler: ValueHandler;

/** Alias for handler function */
const h: ValueHandler;

/** Collection of individual value handler functions */
const valueHandlers: ValueHandlers;

interface ValueHandler {
  /** Process bracket notation values [value] */
  bracket: (str: string) => string | undefined;
  /** Process color bracket values [color] */  
  bracketOfColor: (str: string) => string | undefined;
  /** Process length bracket values [length] */
  bracketOfLength: (str: string) => string | undefined;
  /** Process position bracket values [position] */
  bracketOfPosition: (str: string) => string | undefined;
  /** Process CSS variable syntax $variable */
  cssvar: (str: string) => string | undefined;
  /** Process number values */
  number: (str: string) => string | undefined;
  /** Process number with unit values */
  numberWithUnit: (str: string) => string | undefined;
  /** Process auto values */
  auto: (str: string) => string | undefined;
  /** Process rem values with 1/4 scale */
  rem: (str: string) => string | undefined;
  /** Process px values */
  px: (str: string) => string | undefined;
  /** Process percentage values */
  percent: (str: string) => string | undefined;
  /** Process fraction values (1/2, 3/4, etc.) */
  fraction: (str: string) => string | undefined;
  /** Process global CSS keywords */
  global: (str: string) => string | undefined;
  /** Process time values (s, ms) */
  time: (str: string) => string | undefined;
  /** Process degree values (deg, rad, turn) */
  degree: (str: string) => string | undefined;
  /** Process CSS property names */
  properties: (str: string) => string | undefined;
  /** Process position keywords */
  position: (str: string) => string | undefined;
}

import { h, handler } from "@unocss/preset-mini/utils";

// Process various value types
const pixelValue = h.px('16'); // '16px'
const remValue = h.rem('4'); // '1rem' (4 * 0.25rem)
const fractionValue = h.fraction('1/2'); // '50%'
const bracketValue = h.bracket('[calc(100vw-2rem)]'); // 'calc(100vw - 2rem)'
const autoValue = h.auto('auto'); // 'auto'

// Chain multiple handlers
const complexValue = h.bracket.cssvar.global.auto.fraction.rem('4');
// Tries bracket, then cssvar, then global, then auto, then fraction, then rem

/** Direction mapping for CSS properties (left, right, top, bottom, etc.) */
const directionMap: Record<string, string[]>;

/** Inset positioning mappings */
const insetMap: Record<string, string[]>;

/** Corner/border radius mappings */
const cornerMap: Record<string, string[]>;

/** Transform coordinate mappings (x, y, z) */
const xyzMap: Record<string, string[]>;

/** Transform coordinate array */
const xyzArray: string[];

/** Background/object position mappings */
const positionMap: Record<string, string>;

/** CSS global keywords */
const globalKeywords: string[];

/** CSS math function regex */
const cssMathFnRE: RegExp;

/** CSS variable function regex */
const cssVarFnRE: RegExp;

import { directionMap, xyzMap, globalKeywords } from "@unocss/preset-mini/utils";

// Direction mapping usage
console.log(directionMap['x']); // ['-left', '-right']
console.log(directionMap['t']); // ['-top']

// Transform coordinate mapping
console.log(xyzMap['x']); // ['-x']
console.log(xyzMap['']); // ['-x', '-y'] (default x and y)

// Check for global keywords
console.log(globalKeywords.includes('inherit')); // true

/**
 * Create direction-based size utility matcher
 * @param propertyPrefix - CSS property prefix (e.g., 'margin', 'padding')
 * @returns Dynamic matcher function for directional sizing
 */
function directionSize(propertyPrefix: string): DynamicMatcher;

/**
 * Create color resolver for CSS properties
 * @param property - CSS property name (e.g., 'background-color')
 * @param varName - Base name for opacity variable (e.g., 'bg')
 * @param key - Optional theme key to search in
 * @param shouldPass - Optional validation function
 * @returns Dynamic matcher for color values
 */
function colorResolver(
  property: string, 
  varName: string, 
  key?: ThemeColorKeys, 
  shouldPass?: (css: CSSObject) => boolean
): DynamicMatcher;

/**
 * Apply color variables to shadow values
 * @param shadows - Shadow value(s) to process
 * @param colorVar - CSS variable name for color
 * @returns Processed shadow values with color variables
 */
function colorableShadows(shadows: string | string[], colorVar: string): string[];

/**
 * Check if color string is parseable
 * @param color - Color string to check
 * @param theme - Theme object
 * @param key - Theme key to search in
 * @returns Whether color can be parsed
 */
function hasParseableColor(color: string | undefined, theme: Theme, key: ThemeColorKeys): boolean;

/**
 * Resolve breakpoints from theme/config
 * @param context - Variant context with theme and generator
 * @param key - Breakpoint key ('breakpoints' or 'verticalBreakpoints')
 * @returns Resolved and sorted breakpoint array
 */
function resolveBreakpoints(
  context: Readonly<VariantContext<Theme>>, 
  key?: 'breakpoints' | 'verticalBreakpoints'
): { point: string, size: string }[] | undefined;

/**
 * Resolve vertical breakpoints specifically
 * @param context - Variant context
 * @returns Resolved vertical breakpoints
 */
function resolveVerticalBreakpoints(context: Readonly<VariantContext<Theme>>): { point: string, size: string }[] | undefined;

/**
 * Create global static rules for CSS keywords
 * @param prefix - Utility prefix
 * @param property - CSS property name (defaults to prefix)
 * @returns Array of static rules
 */
function makeGlobalStaticRules(prefix: string, property?: string): StaticRule[];

/**
 * Check if value is a CSS math function
 * @param value - Value to check
 * @returns Whether value is a CSS math function (calc, min, max, clamp)
 */
function isCSSMathFn(value: string | undefined): boolean;

/**
 * Check if string represents a size value
 * @param str - String to check
 * @returns Whether string is a valid size value
 */
function isSize(str: string): boolean;

/**
 * Transform XYZ coordinate values
 * @param d - Direction (x, y, z, or empty)
 * @param v - Value to transform
 * @param name - CSS variable base name
 * @returns Array of CSS variable entries
 */
function transformXYZ(d: string, v: string, name: string): [string, string][];

/**
 * Split utility shorthand delimited by / or :
 * @param body - Shorthand string to split
 * @param type - Expected type for validation
 * @returns Split parts or undefined if invalid
 */
function splitShorthand(body: string, type: string): [string, string] | undefined;

/** Control flag for disabling negative values */
const CONTROL_MINI_NO_NEGATIVE: string;

import { 
  directionSize, 
  colorResolver, 
  isCSSMathFn, 
  transformXYZ,
  makeGlobalStaticRules 
} from "@unocss/preset-mini/utils";

// Create margin utility matcher
const marginMatcher = directionSize('margin');
// Usage in rule: ['m', marginMatcher] matches m-4, mx-2, mt-auto, etc.

// Create background color resolver
const bgColorResolver = colorResolver('background-color', 'bg');
// Usage in rule: ['bg', bgColorResolver] matches bg-red-500, bg-blue/50, etc.

// Check for CSS math functions
console.log(isCSSMathFn('calc(100% - 2rem)')); // true
console.log(isCSSMathFn('16px')); // false

// Transform coordinate values
const scaleValues = transformXYZ('', '1.5', 'scale');
// Returns: [['--un-scale-x', '1.5'], ['--un-scale-y', '1.5']]

// Create global static rules
const displayRules = makeGlobalStaticRules('display');
// Returns rules for display-inherit, display-initial, display-unset, etc.

// Re-exported from @unocss/rule-utils
export * from '@unocss/rule-utils';

// Example rule using utilities
[
  'bg',
  colorResolver('background-color', 'bg', 'backgroundColor')
]

// Direction-based spacing rule
[
  'm',
  directionSize('margin')
]

// Core UnoCSS types for utility functions
interface DynamicMatcher {
  (match: string[], context: RuleContext<Theme>): CSSObject | string | undefined;
}

interface StaticRule {
  0: string;
  1: CSSObject;
  meta?: any;
}

interface RuleContext<T = any> {
  theme: T;
  rawSelector: string;
  currentSelector: string;
  variantHandlers: VariantHandler[];
  constructCSS: ConstructCSSFunction;
  generator: UnoGenerator;
}

interface VariantContext<T = any> {
  theme: T;
  generator: UnoGenerator;
}

interface CSSObject {
  [key: string]: string | number | CSSObject | undefined;
}

interface VariantHandler {
  matcher: string;
  selector?: string | ((input: string) => string);
  parent?: string | [string, number];
  layer?: string;
  sort?: number;
}

type ConstructCSSFunction = (selector: string, css: CSSObject | string) => string;

interface UnoGenerator {
  config: any;
  userConfig: any;
}