Component Creation

/**
 * The chakra factory serves as both a function and an object of chakra-enabled JSX elements.
 * It creates components that accept all style props and theming properties.
 */
declare const chakra: ChakraFactory & HTMLChakraComponents;

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

// HTML element shortcuts (chakra.div, chakra.span, etc.)
interface HTMLChakraComponents {
  div: ChakraComponent<"div", {}>;
  span: ChakraComponent<"span", {}>;
  button: ChakraComponent<"button", {}>;
  input: ChakraComponent<"input", {}>;
  img: ChakraComponent<"img", {}>;
  p: ChakraComponent<"p", {}>;
  h1: ChakraComponent<"h1", {}>;
  h2: ChakraComponent<"h2", {}>;
  h3: ChakraComponent<"h3", {}>;
  h4: ChakraComponent<"h4", {}>;
  h5: ChakraComponent<"h5", {}>;
  h6: ChakraComponent<"h6", {}>;
  a: ChakraComponent<"a", {}>;
  ul: ChakraComponent<"ul", {}>;
  ol: ChakraComponent<"ol", {}>;
  li: ChakraComponent<"li", {}>;
  form: ChakraComponent<"form", {}>;
  section: ChakraComponent<"section", {}>;
  nav: ChakraComponent<"nav", {}>;
  header: ChakraComponent<"header", {}>;
  footer: ChakraComponent<"footer", {}>;
  main: ChakraComponent<"main", {}>;
  aside: ChakraComponent<"aside", {}>;
  article: ChakraComponent<"article", {}>;
  // ... and all other HTML elements
}

interface ChakraStyledOptions {
  shouldForwardProp?(prop: string): boolean;
  label?: string;
  baseStyle?: SystemStyleObject;
}

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

// Create components using the factory function
const Card = chakra("div", {
  baseStyle: {
    borderRadius: "md",
    boxShadow: "lg",
    p: 6
  }
});

// Use HTML element shortcuts
const { div: Box, button: Button, span: Text } = chakra;

// Or access directly
const Box = chakra.div;
const Button = chakra.button;

// Use with custom components
const CustomButton = ({ children, ...props }) => (
  <button {...props}>{children}</button>
);

const StyledCustomButton = chakra(CustomButton);

// Usage with style props
function Example() {
  return (
    <Box bg="gray.50" p={4}>
      <Button
        bg="blue.500"
        color="white"
        px={6}
        py={3}
        _hover={{ bg: "blue.600" }}
      >
        Click me
      </Button>
    </Box>
  );
}

/**
 * Creates a styled component with chakra styling capabilities
 * @param component - React component or HTML element string
 * @param options - Configuration options for the styled component
 * @returns Chakra-enabled component with style props support
 */
function styled<T extends As, P extends object = {}>(
  component: T,
  options?: ChakraStyledOptions
): ChakraComponent<T, P>;

/**
 * Resolve style props to CSS object for custom styling implementations
 * @param props - Component props including style props
 * @returns CSS object with resolved styles
 */
function toCSSObject(props: SystemStyleObject & { theme?: any }): CSSObject;

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

// Create styled components with advanced options
const StyledBox = styled("div", {
  shouldForwardProp: (prop) => !prop.startsWith("custom"),
  baseStyle: {
    display: "flex",
    alignItems: "center"
  }
});

// With custom component
const MyComponent = ({ children, customProp, ...props }) => (
  <div data-custom={customProp} {...props}>
    {children}
  </div>
);

const StyledMyComponent = styled(MyComponent, {
  shouldForwardProp: (prop) => prop !== "customProp"
});

/**
 * Default function to determine which props should be forwarded to DOM elements
 * @param prop - Property name to check
 * @returns True if prop should be forwarded to DOM
 */
function shouldForwardProp(prop: string): boolean;

/**
 * Enhanced forwardRef with proper typing for polymorphic components
 * @param render - Render function for the component
 * @returns Forwarded ref component with proper typing
 */
function forwardRef<Props extends object, Component extends As>(
  render: (
    props: Props & { as?: Component },
    ref: React.Ref<any>
  ) => React.ReactElement | null
): React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;

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

interface CustomButtonProps {
  variant?: "solid" | "outline";
  children: React.ReactNode;
}

const CustomButton = forwardRef<CustomButtonProps, "button">((props, ref) => {
  const { variant = "solid", children, ...rest } = props;
  
  return (
    <button
      ref={ref}
      className={`btn btn-${variant}`}
      {...rest}
    >
      {children}
    </button>
  );
});

/**
 * Remove theming props from a props object
 * @param props - Props object containing theming properties
 * @returns Props object without theming properties
 */
function omitThemingProps<T extends ThemingProps>(
  props: T
): Omit<T, keyof ThemingProps>;

interface ThemingProps<ThemeComponent = string> {
  /**
   * The variant style to use
   */
  variant?: ResponsiveValue<ThemeComponent>;
  /**
   * The size variant to use
   */
  size?: ResponsiveValue<ThemeComponent>;
  /**
   * The color scheme to use for the component
   */
  colorScheme?: ResponsiveValue<string>;
  /**
   * The orientation of the component
   */
  orientation?: ResponsiveValue<"horizontal" | "vertical">;
}

/**
 * CSS keyframes utility for creating animations
 * Re-exported from @emotion/react
 */
declare const keyframes: (
  template: TemplateStringsArray,
  ...args: Array<string | number>
) => string;

/**
 * Emotion CSS interpolation type for advanced styling
 * Re-exported from @emotion/react
 */
type Interpolation<Theme = undefined> = 
  | string 
  | CSSObject 
  | ((theme: Theme) => string | CSSObject);

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

// Create animations with keyframes
const fadeIn = keyframes`
  from { opacity: 0; }
  to { opacity: 1; }
`;

const AnimatedBox = chakra("div", {
  baseStyle: {
    animation: `${fadeIn} 0.3s ease-in-out`
  }
});

// Use with css prop
const CustomComponent = () => (
  <chakra.div
    css={{
      animation: `${fadeIn} 0.5s ease-out`,
      '&:hover': {
        transform: 'scale(1.05)'
      }
    }}
  >
    Animated content
  </chakra.div>
);

/**
 * Get the display name of a component or primitive
 * @param primitive - Component or string to get display name for
 * @returns Display name string
 */
function getDisplayName(primitive: React.ComponentType<any> | string): string;

/**
 * Check if target is a string tag (internal utility)
 * @param target - Target to check
 * @returns True if target is a string tag
 */
function isTag(target: any): target is string;

/**
 * Type representing all DOM elements (HTML and SVG)
 */
type DOMElements = keyof JSX.IntrinsicElements;

// Core component types
type As = React.ElementType;

/**
 * Extract props from a React component or element type
 */
type PropsOf<T extends As> = React.ComponentPropsWithoutRef<T> & {
  as?: As;
};

/**
 * Utility type for omitting common conflicting props
 */
type OmitCommonProps<
  Target, 
  OmitAdditionalProps extends keyof any = never
> = Omit<Target, "as" | "color" | OmitAdditionalProps> & {
  as?: As;
};

/**
 * Type for joining props with override priority
 */
type RightJoinProps<
  SourceProps extends object = {},
  OverrideProps extends object = {}
> = OmitCommonProps<SourceProps, keyof OverrideProps> & OverrideProps;

/**
 * Complex type for polymorphic 'as' prop merging
 */
type MergeWithAs<
  ComponentProps extends object,
  AsProps extends object,
  AdditionalProps extends object = {},
  AsComponent extends As = As
> = RightJoinProps<ComponentProps, AdditionalProps> &
  RightJoinProps<AsProps, AdditionalProps> & {
    as?: AsComponent;
  };

/**
 * Type for polymorphic components with 'as' prop support
 */
type ComponentWithAs<Component extends As, Props extends object = {}> = {
  <AsComponent extends As = Component>(
    props: MergeWithAs<
      React.ComponentProps<Component>,
      React.ComponentProps<AsComponent>,
      Props,
      AsComponent
    >
  ): JSX.Element;
  
  displayName?: string;
  propTypes?: React.WeakValidationMap<any>;
  contextTypes?: React.ValidationMap<any>;
  defaultProps?: Partial<any>;
  id?: string;
};

/**
 * Main Chakra component type combining style props and theming
 */
type ChakraComponent<T extends As, P extends object = {}> = ComponentWithAs<
  T,
  ChakraProps & ThemingProps & P
>;

/**
 * Base Chakra props extending system props
 */
interface ChakraProps extends SystemProps {
  /**
   * if `true`, the element will show a focus outline when focused
   */
  focusable?: boolean;
  /**
   * Truncate text to specified number of lines
   */
  noOfLines?: ResponsiveValue<number>;
  /**
   * Custom CSS styles object
   */
  __css?: SystemStyleObject;
  /**
   * The sx prop for ad-hoc styling
   */
  sx?: SystemStyleObject;
  /**
   * The emotion css prop for styles
   */
  css?: Interpolation<{}>;
}

/**
 * All system style properties combined
 */
interface SystemProps 
  extends LayoutProps,
         ColorProps,
         SpaceProps,
         TypographyProps,
         FlexboxProps,
         GridProps,
         BackgroundProps,
         BorderProps,
         PositionProps,
         ShadowProps,
         PseudoProps {
  // Combined interface of all style property interfaces
}

/**
 * CSS object type for processed styles
 */
interface CSSObject {
  [key: string]: any;
}