Pseudo Selectors and Responsive Utilities

/**
 * Record mapping pseudo prop names to their CSS selectors
 */
const pseudoSelectors: Record<string, string>;

/**
 * Array of all pseudo property names
 */
const pseudoPropNames: string[];

/**
 * Type of the pseudoSelectors object
 */
type Pseudos = typeof pseudoSelectors;

/**
 * Union type of all pseudo-selector keys
 */
type PseudoKey = keyof Pseudos;

// Interactive States
"_hover": "&:hover, &[data-hover]"
"_active": "&:active, &[data-active]" 
"_focus": "&:focus, &[data-focus]"
"_focusVisible": "&:focus-visible, &[data-focus-visible]"
"_focusWithin": "&:focus-within, &[data-focus-within]"
"_visited": "&:visited"

// Form States  
"_disabled": "&:disabled, &[disabled], &[aria-disabled=true], &[data-disabled]"
"_readOnly": "&[aria-readonly=true], &[readonly], &[data-readonly]"
"_invalid": "&[aria-invalid=true], &[data-invalid]"
"_valid": "&[data-valid], &[data-state=valid]"
"_checked": "&[aria-checked=true], &[data-checked], &[data-state=checked]"
"_indeterminate": "&:indeterminate, &[aria-checked=mixed], &[data-indeterminate], &[data-state=indeterminate]"

// Loading and Selection States
"_loading": "&[data-loading], &[aria-busy=true]"
"_selected": "&[aria-selected=true], &[data-selected]"
"_highlighted": "&[data-highlighted]"

// Visibility States
"_hidden": "&[hidden], &[data-hidden]"
"_empty": "&:empty, &[data-empty]"

// Component States
"_expanded": "&[aria-expanded=true], &[data-expanded], &[data-state=expanded]"
"_pressed": "&[aria-pressed=true], &[data-pressed]"
"_grabbed": "&[aria-grabbed=true], &[data-grabbed]"
"_open": "&[data-open], &[open], &[data-state=open]"
"_closed": "&[data-closed], &[data-state=closed]"
"_complete": "&[data-complete]"
"_incomplete": "&[data-incomplete]"
"_current": "&[data-current]"

import { pseudoSelectors } from "@chakra-ui/styled-system";

// Interactive button styles
const buttonStyles = {
  bg: "blue.500",
  color: "white",
  
  // Hover state
  _hover: {
    bg: "blue.600",
    transform: "translateY(-2px)",
    boxShadow: "lg"
  },
  
  // Active state  
  _active: {
    transform: "translateY(0)",
    bg: "blue.700"
  },
  
  // Focus state for accessibility
  _focus: {
    outline: "2px solid",
    outlineColor: "blue.400", 
    outlineOffset: "2px"
  },
  
  // Disabled state
  _disabled: {
    opacity: 0.4,
    cursor: "not-allowed",
    _hover: {
      bg: "blue.500", // Override hover when disabled
      transform: "none"
    }
  }
};

// Form input styles
const inputStyles = {
  border: "1px solid",
  borderColor: "gray.300",
  
  _hover: {
    borderColor: "gray.400"
  },
  
  _focus: {
    borderColor: "blue.500",
    boxShadow: "0 0 0 1px var(--chakra-colors-blue-500)"
  },
  
  _invalid: {
    borderColor: "red.500",
    boxShadow: "0 0 0 1px var(--chakra-colors-red-500)"
  },
  
  _disabled: {
    bg: "gray.100", 
    color: "gray.400",
    cursor: "not-allowed"
  },
  
  _readOnly: {
    bg: "gray.50",
    cursor: "default"
  }
};

// Checkbox/radio styles
const checkboxStyles = {
  _checked: {
    bg: "blue.500",
    borderColor: "blue.500",
    _hover: {
      bg: "blue.600"
    }
  },
  
  _indeterminate: {
    bg: "blue.500",
    borderColor: "blue.500"
  },
  
  _disabled: {
    _checked: {
      bg: "gray.400",
      borderColor: "gray.400"
    }
  }
};

// Pseudo-Elements
"_before": "&::before"
"_after": "&::after"
"_placeholder": "&::placeholder, &[data-placeholder]"
"_selection": "&::selection"
"_firstLetter": "&::first-letter"

// Positional Selectors
"_first": "&:first-of-type"
"_last": "&:last-of-type"
"_notFirst": "&:not(:first-of-type)"
"_notLast": "&:not(:last-of-type)"
"_even": "&:nth-of-type(even)"
"_odd": "&:nth-of-type(odd)"

// Browser States
"_autofill": "&:-webkit-autofill"
"_placeholderShown": "&:placeholder-shown, &[data-placeholder-shown]"
"_fullScreen": "&:fullscreen, &[data-fullscreen]"

// Pseudo-element styling
const decoratedBoxStyles = {
  position: "relative",
  
  // Add decorative elements
  _before: {
    content: '""',
    position: "absolute",
    top: 0,
    left: 0,
    width: "4px",
    height: "100%",
    bg: "blue.500"
  },
  
  _after: {
    content: '""',
    position: "absolute",
    bottom: "-2px",
    left: 0,
    right: 0,
    height: "2px",
    bg: "linear-gradient(to right, blue.500, transparent)"
  },
  
  // Style text selection
  _selection: {
    bg: "blue.100",
    color: "blue.900"
  },
  
  // Style first letter (drop cap)
  _firstLetter: {
    fontSize: "3xl",
    fontWeight: "bold",
    color: "blue.500",
    float: "left",
    lineHeight: 1,
    marginRight: 1
  }
};

// List styling with positional selectors
const listItemStyles = {
  borderBottom: "1px solid",
  borderColor: "gray.200",
  py: 3,
  
  _first: {
    borderTop: "1px solid",
    borderTopColor: "gray.200"
  },
  
  _last: {
    borderBottom: "none"
  },
  
  _even: {
    bg: "gray.50"
  },
  
  _odd: {
    bg: "white"
  },
  
  _notLast: {
    marginBottom: 2
  }
};

// Input placeholder styling
const inputWithPlaceholderStyles = {
  _placeholder: {
    color: "gray.500",
    opacity: 1
  },
  
  _placeholderShown: {
    borderColor: "gray.300"
  },
  
  // Autofill styling (browser-specific)
  _autofill: {
    boxShadow: "0 0 0px 1000px white inset",
    WebkitTextFillColor: "gray.800"
  }
};

// Group State Selectors (parent-based)
"_groupHover": "[role=group]:hover &, [data-group]:hover &, .group:hover &"
"_groupFocus": "[role=group]:focus &, [data-group]:focus &, .group:focus &"  
"_groupActive": "[role=group]:active &, [data-group]:active &, .group:active &"
"_groupDisabled": "[role=group]:disabled &, [data-group][data-disabled] &, .group[data-disabled] &"
"_groupInvalid": "[role=group][aria-invalid=true] &, [data-group][data-invalid] &"
"_groupChecked": "[role=group][aria-checked=true] &, [data-group][data-checked] &"
"_groupFocusVisible": "[role=group]:focus-visible &, [data-group][data-focus-visible] &"
"_groupFocusWithin": "[role=group]:focus-within &, [data-group][data-focus-within] &"
"_groupOpen": "[role=group][data-open] &, [data-group][data-open] &"
"_groupClosed": "[role=group][data-closed] &, [data-group][data-closed] &"

// Peer State Selectors (sibling-based)
"_peerHover": "[data-peer]:hover ~ &, .peer:hover ~ &"
"_peerFocus": "[data-peer]:focus ~ &, .peer:focus ~ &" 
"_peerActive": "[data-peer]:active ~ &, .peer:active ~ &"
"_peerDisabled": "[data-peer]:disabled ~ &, [data-peer][data-disabled] ~ &"
"_peerInvalid": "[data-peer][aria-invalid=true] ~ &, [data-peer][data-invalid] ~ &"
"_peerChecked": "[data-peer][aria-checked=true] ~ &, [data-peer][data-checked] ~ &"
"_peerFocusVisible": "[data-peer]:focus-visible ~ &, .peer:focus-visible ~ &"
"_peerFocusWithin": "[data-peer]:focus-within ~ &, .peer:focus-within ~ &"
"_peerPlaceholderShown": "[data-peer]:placeholder-shown ~ &, .peer:placeholder-shown ~ &"

// Group-based styling (parent controls children)
const cardWithGroupStyles = {
  // Parent card wrapper gets role="group" or data-group
  position: "relative",
  transition: "all 0.2s",
  
  // Child elements respond to parent hover
  _groupHover: {
    transform: "translateY(-4px)",
    boxShadow: "xl"
  }
};

const cardImageStyles = {
  transition: "all 0.2s",
  
  _groupHover: {
    transform: "scale(1.05)"
  }
};

const cardButtonStyles = {
  opacity: 0,
  transform: "translateY(10px)",
  transition: "all 0.2s",
  
  _groupHover: {
    opacity: 1,
    transform: "translateY(0)"
  },
  
  _groupFocus: {
    opacity: 1,
    transform: "translateY(0)"
  }
};

// Peer-based styling (siblings affect each other)
const customCheckboxStyles = {
  // Hidden checkbox input with class="peer" or data-peer
  position: "absolute",
  opacity: 0
};

const customCheckboxLabelStyles = {
  cursor: "pointer",
  border: "2px solid",
  borderColor: "gray.300",
  borderRadius: "md",
  p: 3,
  transition: "all 0.2s",
  
  // Style based on sibling checkbox state
  _peerChecked: {
    borderColor: "blue.500",
    bg: "blue.50",
    color: "blue.700"
  },
  
  _peerFocus: {
    outline: "2px solid",
    outlineColor: "blue.400",
    outlineOffset: "2px"
  },
  
  _peerDisabled: {
    opacity: 0.5,
    cursor: "not-allowed"
  }
};

// Complex peer relationships
const radioGroupStyles = {
  // Each radio input has class="peer" and name attribute
  _peerChecked: {
    "& + label": {
      bg: "blue.500",
      color: "white",
      fontWeight: "bold"
    }
  },
  
  _peerFocus: {
    "& + label": {
      outline: "2px solid",
      outlineColor: "blue.400"
    }
  }
};

// Color Mode Selectors
"_dark": ".chakra-ui-dark &:not([data-theme]), [data-theme=dark] &:not([data-theme]), &[data-theme=dark]"
"_light": ".chakra-ui-light &:not([data-theme]), [data-theme=light] &:not([data-theme]), &[data-theme=light]"

// Media Queries
"_mediaDark": "@media (prefers-color-scheme: dark)"
"_mediaReduceMotion": "@media (prefers-reduced-motion: reduce)"

// Direction Support
"_rtl": "[dir=rtl] &, &[dir=rtl]"
"_ltr": "[dir=ltr] &, &[dir=ltr]" 

// Orientation
"_horizontal": "&[data-orientation=horizontal]"
"_vertical": "&[data-orientation=vertical]"

// Navigation States
"_activeLink": "&[aria-current=page]"
"_activeStep": "&[aria-current=step]"

// Color mode adaptive styles
const adaptiveStyles = {
  bg: "white",
  color: "black",
  border: "1px solid",
  borderColor: "gray.200",
  
  // Dark mode styles
  _dark: {
    bg: "gray.800",
    color: "white", 
    borderColor: "gray.600"
  },
  
  // System preference detection
  _mediaDark: {
    bg: "gray.900"
  }
};

// RTL/LTR direction support
const directionalStyles = {
  marginLeft: 4,
  
  _rtl: {
    marginLeft: 0,
    marginRight: 4
  },
  
  _ltr: {
    marginLeft: 4,
    marginRight: 0
  }
};

// Reduced motion support
const animatedStyles = {
  transform: "translateX(0)",
  transition: "transform 0.3s ease",
  
  _hover: {
    transform: "translateX(10px)"
  },
  
  _mediaReduceMotion: {
    transition: "none",
    _hover: {
      transform: "none"
    }
  }
};

// Navigation and orientation
const tabStyles = {
  _activeLink: {
    bg: "blue.500",
    color: "white",
    fontWeight: "bold"
  },
  
  _horizontal: {
    borderBottom: "2px solid transparent",
    _activeLink: {
      borderBottom: "2px solid",
      borderBottomColor: "blue.500"
    }
  },
  
  _vertical: {
    borderLeft: "2px solid transparent", 
    _activeLink: {
      borderLeft: "2px solid",
      borderLeftColor: "blue.500"
    }
  }
};

/**
 * Responsive value as array (positional breakpoints)
 */
type ResponsiveArray<T> = Array<T | null>;

/**
 * Responsive value as object (named breakpoints)
 */
type ResponsiveObject<T> = Partial<Record<string, T>>;

/**
 * Union type for all responsive value formats
 */
type ResponsiveValue<T> = T | ResponsiveArray<T> | ResponsiveObject<T>;

/**
 * CSS length value type
 */
type Length = string | 0 | number;

/**
 * Union type helper for string literals
 */
type Union<T> = T | (string & {});

/**
 * Theme-aware token type with responsive support
 */
type Token<CSSType, ThemeKey = unknown> = 
  ThemeKey extends keyof ThemeTypings
    ? ResponsiveValue<CSSType | ThemeTypings[ThemeKey]>
    : ResponsiveValue<CSSType>;

import type { ResponsiveValue, Token } from "@chakra-ui/styled-system";

// Array syntax (positional breakpoints)
const arrayResponsive: ResponsiveValue<string> = ["16px", "20px", "24px", "32px"];
// base: 16px, sm: 20px, md: 24px, lg: 32px

// Object syntax (named breakpoints)  
const objectResponsive: ResponsiveValue<string> = {
  base: "16px",
  md: "20px", 
  lg: "24px",
  xl: "32px"
};

// Null values (skip breakpoints)
const sparseResponsive: ResponsiveValue<string> = ["16px", null, "24px"];
// base: 16px, sm: inherit from base, md: 24px

// Theme-aware tokens
const colorToken: Token<string, "colors"> = {
  base: "red.500",    // Theme color token
  dark: "#ff0000"     // CSS value
};

const spaceToken: Token<number, "space"> = {
  base: 4,            // Theme space token (e.g., 1rem)
  md: "2rem",         // CSS value
  lg: 8               // Theme space token
};

// Component with responsive props
interface ResponsiveBoxProps {
  width?: ResponsiveValue<string | number>;
  height?: ResponsiveValue<string | number>; 
  bg?: Token<string, "colors">;
  p?: Token<number, "space">;
  fontSize?: Token<string, "fontSizes">;
}

const responsiveBoxStyles: ResponsiveBoxProps = {
  // Responsive width
  width: { base: "100%", md: "50%", lg: "33%" },
  
  // Responsive height with array syntax
  height: [200, 250, 300],
  
  // Responsive background color
  bg: { base: "blue.100", _dark: "blue.800" },
  
  // Responsive padding  
  p: { base: 4, md: 6, lg: 8 },
  
  // Responsive font size
  fontSize: ["sm", "md", "lg", "xl"]
};

// Complex responsive patterns
const complexResponsive = {
  // Nested responsive pseudo-selectors
  _hover: {
    bg: { base: "gray.100", _dark: "gray.700" },
    transform: { base: "scale(1.02)", lg: "scale(1.05)" }
  },
  
  // Responsive with mixed units
  margin: { 
    base: "1rem",      // CSS value
    md: 4,             // Theme token
    lg: "2rem auto"    // CSS shorthand
  },
  
  // Conditional responsive
  display: { base: "block", md: "flex" },
  flexDirection: { base: "column", md: "row" }
};

/**
 * Collection of transform functions for CSS value processing
 */
const transformFunctions: {
  /** Convert unitless numbers to pixels */
  px(value: number | string): string;
  
  /** Convert fractions to percentages */
  fraction(value: any): string;
  
  /** Add degrees unit to rotation values */
  degree(value: any): string;
  
  /** Handle RTL/LTR float direction */
  float(value: any, theme: Record<string, any>): string;
  
  /** Process gradient values */
  gradient(value: any): string;
  
  /** Process filter values with auto template support */
  filter(value: any): string;
  
  /** Process backdrop-filter values */
  backdropFilter(value: any): string;
  
  /** Generate ring (outline) effect */
  ring(value: string): string;
  
  /** Handle background clip with text support */
  bgClip(value: string): Record<string, any> | { backgroundClip: string };
  
  /** Process transform values with GPU acceleration */
  transform(value: any): string;
  
  /** Handle viewport height values */
  vh(value: number | string): string;
  
  /** Process background image URLs */
  bgImage(value: any): string;
  
  /** Generate accessible outline styles */
  outline(value: any): Record<string, any>;
  
  /** Process flex direction with space utilities */
  flexDirection(value: any): Record<string, any>;
  
  // Filter functions
  blur: (value: any) => string;
  opacity: (value: any) => string;
  brightness: (value: any) => string;
  contrast: (value: any) => string;
  dropShadow: (value: any) => string;
  grayscale: (value: any) => string;
  hueRotate: (value: any) => string;
  invert: (value: any) => string;
  saturate: (value: any) => string;
  sepia: (value: any) => string;
};

import { transformFunctions } from "@chakra-ui/styled-system";

// Unit transformations
console.log(transformFunctions.px(16));      // "16px"
console.log(transformFunctions.px("1rem"));  // "1rem" (preserved)

console.log(transformFunctions.fraction(0.5));  // "50%"
console.log(transformFunctions.fraction(2));    // 2 (preserved)

console.log(transformFunctions.degree(45));     // "45deg"
console.log(transformFunctions.degree("45deg"));// "45deg" (preserved)

// Background and visual effects
const bgImageUrl = transformFunctions.bgImage("hero.jpg");
// Result: "url(hero.jpg)"

const gradientValue = transformFunctions.gradient("linear(to-r, blue.500, green.500)");
// Result: "linear-gradient(to right, var(--chakra-colors-blue-500), var(--chakra-colors-green-500))"

const textClip = transformFunctions.bgClip("text");
// Result: { color: "transparent", backgroundClip: "text" }

// Filter functions
const blurFilter = transformFunctions.blur("10px");
// Result: "blur(10px)"

const complexFilter = [
  transformFunctions.blur("5px"),
  transformFunctions.brightness(1.2),
  transformFunctions.contrast(1.1)
].join(" ");
// Result: "blur(5px) brightness(1.2) contrast(1.1)"

// Auto filter template
const autoFilter = transformFunctions.filter("auto");
// Result: CSS filter template with CSS variables

// Direction-aware values
const floatValue = transformFunctions.float("left", { direction: "rtl" });
// Result: "right" (flipped for RTL)

// Ring effect (accessible focus outline)
const ringEffect = transformFunctions.ring("2px");
// Result: CSS template for ring effect with shadows

// Viewport height handling
const fullHeight = transformFunctions.vh("$100vh");
// Result: "var(--chakra-vh)" (dynamic viewport height)

// Transform with GPU acceleration
const gpuTransform = transformFunctions.transform("auto-gpu");
// Result: CSS transform template with translate3d for GPU acceleration

// Custom transform configuration
const customTransforms = {
  // Use transform functions in config
  borderRadius: {
    transform: (value: any) => 
      value === "full" ? "50%" : transformFunctions.px(value)
  },
  
  rotate: {
    transform: transformFunctions.degree
  },
  
  backgroundImage: {
    transform: transformFunctions.bgImage
  },
  
  filter: {
    transform: transformFunctions.filter
  }
};

// Import all pseudo and responsive utilities
import {
  pseudoSelectors,
  pseudoPropNames,
  transformFunctions
} from "@chakra-ui/styled-system";

// Import specific modules
import { pseudoSelectors } from "@chakra-ui/styled-system/pseudos";

// Import types
import type {
  Pseudos,
  PseudoKey,
  ResponsiveValue,
  ResponsiveArray,
  ResponsiveObject,
  Token,
  Union,
  Length
} from "@chakra-ui/styled-system";

// Use in component props
interface ComponentProps {
  bg?: Token<string, "colors">;
  fontSize?: ResponsiveValue<string>;
  _hover?: SystemStyleObject;
  _dark?: SystemStyleObject;
}