The core function for creating styled components

import { styled } from "better-styled";

const Button = styled("button", {
  base: { className: "px-4 py-2 rounded" },
  variants: {
    size: {
      sm: { className: "text-sm" },
      lg: { className: "text-lg" },
    },
  },
});

const Card = styled("div", {
  base: {
    className: "rounded-xl border shadow-sm",
    role: "article",
  },
});

const Button = styled("button", {
  variants: {
    size: {
      sm: { className: "h-8 px-3 text-sm" },
      md: { className: "h-10 px-4 text-base" },
      lg: { className: "h-12 px-6 text-lg" },
    },
    intent: {
      primary: { className: "bg-blue-600 text-white" },
      danger: { className: "bg-red-600 text-white" },
      ghost: { className: "bg-transparent" },
    },
  },
});

// Usage
<Button size="lg" intent="danger">Delete</Button>

const Button = styled("button", {
  variants: {
    size: {
      sm: { className: "text-sm" },
      md: { className: "text-base" },
      lg: { className: "text-lg" },
    },
  },
  defaultVariants: {
    size: "md",
  },
});

// These are equivalent:
<Button />
<Button size="md" />

const Button = styled("button", {
  variants: {
    color: {
      primary: { className: "text-blue-600" },
      danger: { className: "text-red-600" },
    },
    variant: {
      solid: { className: "text-white" },
      outline: { className: "bg-transparent border-2" },
    },
  },
  compoundVariants: [
    {
      color: "primary",
      variant: "solid",
      props: { className: "bg-blue-600" },
    },
    {
      color: "primary",
      variant: "outline",
      props: { className: "border-blue-600" },
    },
    {
      color: "danger",
      variant: "solid",
      props: { className: "bg-red-600" },
    },
    {
      color: "danger",
      variant: "outline",
      props: { className: "border-red-600" },
    },
  ],
});

const ButtonContext = createStyledContext({
  size: ["sm", "md", "lg"],
});

const Button = styled("button", {
  context: ButtonContext,
  // variants automatically sync with context
});

const Button = styled("button", {
  base: { className: "px-4" },
  variants: {
    size: {
      lg: { className: "px-8" }, // overrides base px-4
    },
  },
});

// Direct props have highest priority
<Button size="lg" className="px-12">
  {/* Final className: "px-12" (direct prop wins) */}
</Button>

const Button = styled("button", {
  base: { className: "px-4 py-2 bg-blue-500" },
  variants: {
    size: {
      lg: { className: "px-8 py-4" }, // px and py override, bg stays
    },
  },
});

const Box = styled("div", {
  base: { style: { padding: 16, margin: 8 } },
  variants: {
    spacing: {
      large: { style: { padding: 32 } }, // only padding overrides
    },
  },
});

const Button = styled("button", {
  base: {
    onClick: () => console.log("base click"),
  },
  variants: {
    tracked: {
      true: {
        onClick: () => console.log("tracked click"),
      },
    },
  },
});

// Both handlers run!
<Button tracked onClick={() => console.log("user click")}>
  {/* Logs: "base click", "tracked click", "user click" */}
</Button>

// HTML element
const Button = styled("button", { ... });

// React component
const StyledLink = styled(Link, { ... });

// React Native
const StyledPressable = styled(Pressable, { ... });

const Button = styled("button", {
  variants: {
    size: {
      sm: {},
      md: {},
      lg: {},
    },
  },
});

// ✅ TypeScript knows: size?: "sm" | "md" | "lg"
<Button size="xl" /> // ❌ Error: "xl" is not valid