forge

Example:

import { define } from "forge"

export const Button = define("button", {
  layout: {
    padding: 20,
  },
  look: {
    background: "blue",
  },
  variants: {
    kind: {
      danger: { look: { background: "red" } },
      warning: { look: { background: "yellow" } },
    }
  },
})

// Usage
<Button>Click me</Button>
<Button kind="danger">Click me carefully</Button>
<Button kind="warning">Click me?</Button>

export const Profile = define("div", {
  layout: {
    padding: 50,
  },
  look: {
    background: "red",
  },

  parts: {
    header: { layout: { display: "flex" } },
    avatar: { layout: { width: 50 } },
    bio: { look: { color: "gray" } },
  },

  variants: {
    size: {
      small: {
        parts: { avatar: { layout: { width: 20 }}}
      }
    }
  },

  render({ props, parts: { root, header, avatar, bio } }) {
    return (
      <root>
        <header>
          <avatar src={props.pic} />
          <bio>{props.bio}</bio>
        </header>
      </root>
    )
  },
})

// Usage:
import { Profile } from './whatever'

<Profile pic={user.pic} bio={user.bio} />