Chakra UI System

import { 
  chakra, 
  ThemeProvider, 
  useTheme, 
  useColorMode, 
  useToken,
  css,
  styled,
  keyframes
} from "@chakra-ui/system";
import type { Interpolation } from "@chakra-ui/system";

const { 
  chakra, 
  ThemeProvider, 
  useTheme, 
  useColorMode, 
  useToken,
  css,
  styled
} = require("@chakra-ui/system");

import { chakra, ThemeProvider, useColorMode } from "@chakra-ui/system";

// Create styled components with the chakra factory
const Box = chakra("div");
const Button = chakra("button");

// Use style props for responsive, themed styling
function MyComponent() {
  const { colorMode, toggleColorMode } = useColorMode();
  
  return (
    <Box 
      bg={{ base: "white", md: "gray.50" }}
      p={4}
      borderRadius="md"
      boxShadow="lg"
    >
      <Button
        onClick={toggleColorMode}
        colorScheme="blue"
        size="md"
        variant="solid"
      >
        Toggle {colorMode === "light" ? "Dark" : "Light"}
      </Button>
    </Box>
  );
}

// Wrap your app with ThemeProvider
function App() {
  return (
    <ThemeProvider theme={myTheme}>
      <MyComponent />
    </ThemeProvider>
  );
}

// Core styling properties available on all chakra components
interface StyleProps {
  // Layout
  width?: ResponsiveValue<CSS.Property.Width>;
  height?: ResponsiveValue<CSS.Property.Height>;
  display?: ResponsiveValue<CSS.Property.Display>;
  
  // Spacing  
  margin?: ResponsiveValue<CSS.Property.Margin>;
  padding?: ResponsiveValue<CSS.Property.Padding>;
  
  // Colors
  color?: ResponsiveValue<string>;
  backgroundColor?: ResponsiveValue<string>;
  
  // Typography
  fontSize?: ResponsiveValue<string>;
  fontWeight?: ResponsiveValue<CSS.Property.FontWeight>;
  
  // Pseudo-selectors
  _hover?: SystemStyleObject;
  _focus?: SystemStyleObject;
  _active?: SystemStyleObject;
}

// Main chakra factory for creating styled components
declare const chakra: ChakraFactory & HTMLChakraComponents;

interface ChakraFactory {
  <T extends As, P extends object = {}>(
    component: T,
    options?: ChakraStyledOptions
  ): ChakraComponent<T, P>;
}

// Styled function for advanced component creation
function styled<T extends As, P extends object = {}>(
  component: T, 
  options?: ChakraStyledOptions
): ChakraComponent<T, P>;

// Theme provider for context
function ThemeProvider(props: ThemeProviderProps): JSX.Element;

// Hook for accessing theme
function useTheme<T extends object = Dict>(): T;

// Token resolution utilities
function useToken<T extends StringOrNumber | StringOrNumber[]>(
  scale: string,
  token: T,
  fallback?: T
): T;

function getToken<T extends StringOrNumber | StringOrNumber[]>(
  scale: string,
  token: T,
  fallback?: T
): (theme: Dict) => T;

// Color mode hook
function useColorMode(): {
  colorMode: "light" | "dark";
  toggleColorMode: () => void;
  setColorMode: (value: "light" | "dark") => void;
};

// Value selection based on color mode
function useColorModeValue<TLight, TDark>(
  light: TLight, 
  dark: TDark
): TLight | TDark;

// Provider for color mode context
function ColorModeProvider(props: ColorModeProviderProps): JSX.Element;

// Core component types
type As = React.ElementType;
type Dict<T = any> = Record<string, T>;
type StringOrNumber = string | number;
type ChakraComponent<T extends As, P extends object> = React.ForwardRefExoticComponent<
  React.ComponentProps<T> & P & { as?: As }
>;

// Style prop types
type ResponsiveValue<T> = T | ResponsiveArray<T> | ResponsiveObject<T>;
type ResponsiveArray<T> = Array<T | null>;
type ResponsiveObject<T> = Partial<Record<string, T>>;

type SystemStyleObject = {
  [K in string]: ResponsiveValue<any>;
} & {
  // Pseudo-selectors
  _hover?: SystemStyleObject;
  _focus?: SystemStyleObject;
  _active?: SystemStyleObject;
  _visited?: SystemStyleObject;
  _disabled?: SystemStyleObject;
};

// Theme types
interface ThemingProps<ThemeComponent = string> {
  variant?: ResponsiveValue<ThemeComponent>;
  size?: ResponsiveValue<ThemeComponent>;
  colorScheme?: ResponsiveValue<string>;
  orientation?: ResponsiveValue<"horizontal" | "vertical">;
}

// Provider props
interface ThemeProviderProps {
  theme: Dict;
  cssVarsRoot?: string;
  children?: React.ReactNode;
}

interface ColorModeProviderProps {
  value?: "light" | "dark";
  children?: React.ReactNode;
  options?: {
    useSystemColorMode?: boolean;
    initialColorMode?: "light" | "dark";
    disableTransition?: boolean;
  };
}