Core Styling

/**
 * Creates styled React components with static or dynamic styles
 * @param component - React element type or component to style (e.g., "div", "button", CustomComponent)
 * @param style - Style object or function that returns style object based on props
 * @returns StyletronComponent that can be used as a React component
 */
function styled<T extends React.ElementType, Props extends {}>(
  component: T,
  style: StyleObject | ((props: Props) => StyleObject)
): StyletronComponent<T, Props>;

import { styled } from "styletron-react";

// Static styling
const BlueButton = styled("button", {
  backgroundColor: "blue",
  color: "white",
  padding: "8px 16px",
  border: "none",
  borderRadius: "4px",
});

// Dynamic styling based on props
const ConditionalButton = styled("button", (props: {$primary: boolean}) => ({
  backgroundColor: props.$primary ? "blue" : "gray",
  color: "white",
  padding: "8px 16px",
  ":hover": {
    opacity: 0.8,
  },
}));

// Styling custom components
const CustomCard = ({ title, children, ...props }) => (
  <div {...props}>
    <h3>{title}</h3>
    {children}
  </div>
);

const StyledCard = styled(CustomCard, {
  border: "1px solid #ccc",
  borderRadius: "8px",
  padding: "16px",
  boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
});

/**
 * Creates a custom styled function with specific configuration
 * @param options - Configuration object with getInitialStyle, driver, and wrapper functions
 * @returns Custom styled function with the provided configuration
 */
function createStyled(options: {
  getInitialStyle: () => StyleObject;
  driver: (style: StyleObject, engine: StandardEngine) => string;
  wrapper: (component: React.FC<any>) => React.ComponentType<any>;
}): StyledFn;

type StyledFn = {
  <T extends React.ElementType, Props extends {}>(
    component: T,
    style: StyleObject | ((props: Props) => StyleObject)
  ): StyletronComponent<T, Props>;
};

import { createStyled, styled } from "styletron-react";
import { driver, getInitialStyle } from "styletron-standard";

// Create custom styled function with wrapper
const customStyled = createStyled({
  getInitialStyle,
  driver,
  wrapper: (Component) => (props) => (
    <div className="custom-wrapper">
      <Component {...props} />
    </div>
  ),
});

// Use custom styled function
const WrappedButton = customStyled("button", {
  padding: "8px 16px",
  backgroundColor: "green",
});

type $style = StyleObject | ((props: any) => StyleObject);

// Static style override
<StyledButton $style={{backgroundColor: "red"}}>
  Red Button
</StyledButton>

// Dynamic style override
<StyledButton $style={(props) => ({
  backgroundColor: props.error ? "red" : "blue"
})}>
  Conditional Button
</StyledButton>

type $as = React.ComponentType<any> | keyof JSX.IntrinsicElements;

// Render button styles on an anchor element
<StyledButton $as="a" href="/link">
  Link Button
</StyledButton>

// Render with custom component
<StyledButton $as={CustomComponent} customProp="value">
  Custom Component Button
</StyledButton>

// Combine with existing className
<StyledButton className="additional-class">Button</StyledButton>

// Forward refs
const buttonRef = useRef<HTMLButtonElement>(null);
<StyledButton ref={buttonRef}>Button</StyledButton>

interface StyletronComponent<D extends React.ElementType, P extends {}> {
  <C extends React.ElementType = D>(
    props: {
      $as?: C;
    } & OverrideProps<C, P>
  ): JSX.Element;
  __STYLETRON__: any;
  displayName?: string;
}

type StyleObject = {
  [property: string]: string | number | StyleObject;
  // Supports CSS properties and pseudo-selectors/media queries
  ":hover"?: StyleObject;
  ":focus"?: StyleObject;
  ":active"?: StyleObject;
  "@media (max-width: 768px)"?: StyleObject;
  // ... other CSS properties and selectors
};

type StandardEngine = {
  renderStyle: (style: StyleObject) => string;
  renderKeyframes: (keyframes: any) => string;
  renderFontFace: (fontFace: any) => string;
};