Introduction

import { styled } from '@alex.radulescu/styled-static';

const Button = styled.button`
  padding: 0.5rem 1rem;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background: #2563eb;
  }
`;

// Extend with additional styles
const PrimaryButton = styled(Button)`
  font-weight: bold;
`;

// Usage
<Button onClick={handleClick}>Click me</Button>

// Style elements
const Button = styled.button`padding: 0.5rem 1rem;`;

// Extend components
const Primary = styled(Button)`font-weight: bold;`;

// Get class string
const active = css`outline: 2px solid blue;`;

// Global styles
const GlobalStyle = createGlobalStyle`* { box-sizing: border-box; }`;

// Scoped keyframes
const spin = keyframes`from { transform: rotate(0deg); }`;

// Type-safe component variants
const Btn = styledVariants({
  component: 'button',
  css: css`padding: 0.5rem;`,
  variants: { size: { sm: css`font-size: 0.875rem;` } }
});

// Type-safe class variants
const badge = cssVariants({
  css: css`padding: 0.25rem;`,
  variants: { color: { blue: css`background: #e0f2fe;` } }
});

// Combine classes conditionally
<div className={cx('base', isActive && activeClass)} />

// Default attributes
const Input = styled.input.attrs({ type: 'password' })`padding: 0.5rem;`;

// Polymorphism
const LinkButton = withComponent(Link, Button);